angular下H5上傳圖片（可預覽，可多張上傳）

最近做的項目中用到了angular下上傳圖片功能，在做的過程中遇到了許多問題，最終都得以解決

angular上傳時和普通上傳時過程差不多，只不過是要不一些東西轉化為angular的東西。

1.ng-file-select,指令angular是沒此功能的，其實也是轉化成了change事件，不多說，直接上代碼

angular.module('myApp')
.directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $timeout) {
        return function(scope, elem, attr) {
            var fn = $parse(attr['ngFileSelect']);
            
            elem.bind('change', function(evt) {
                var files = [], fileList, i;
                fileList = evt.target.files;
                
                if (fileList != null) {
                    for (i = 0; i < fileList.length; i++) {
                        files.push(fileList.item(i));
                    }
                }
                $timeout(function() {
                    fn(scope, {
                        $files : files,
                        $event : evt
                    });
                });
            });
        };
    }])

2.服務 上傳文件前預覽並壓縮圖片功能

//上傳文件預覽
angular.module('myServers',[])
    .factory('fileReader', ['$q', '$log', function($q, $log) {
        var dataURItoBlob = function(dataURI) {  
            // convert base64/URLEncoded data component to raw binary data held in a string  
            var byteString;  
            if (dataURI.split(',')[0].indexOf('base64') >= 0)  
                byteString = atob(dataURI.split(',')[1]);  
            else  
                byteString = unescape(dataURI.split(',')[1]);  
      
            // separate out the mime component  
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
      
            // write the bytes of the string to a typed array  
            var ia = new Uint8Array(byteString.length);  
            for (var i = 0; i < byteString.length; i++) {  
                ia[i] = byteString.charCodeAt(i);  
            }  
      
            return new Blob([ia], {  
                type: mimeString  
            });  
       }; 
         
         
        var onLoad = function(reader, deferred, scope,file) {
            return function() {
                scope.$apply(function() {
                     var img = new Image();
                    //前端壓縮圖片
                    img.onload = function(){ 
                        //resize the image using canvas  
                        var canvas = document.createElement("canvas");  
                        var ctx = canvas.getContext("2d");  
                        var width = img.width;  
                        var height = img.height; 
                        
                        var MAX_WIDTH = width>2500 ?  width/2 : 2500;  
                        var MAX_HEIGHT = height>2500 ? height/2 : 2500;
                        if (width > height) {  
                            if (width > MAX_WIDTH) {  
                                height *= MAX_WIDTH / width;  
                                width = MAX_WIDTH;  
                            }  
                        } else {  
                            if (height > MAX_HEIGHT) {  
                                width *= MAX_HEIGHT / height;  
                                height = MAX_HEIGHT;  
                            }  
                        }
    
                        canvas.width = width ;  
                        canvas.height = height; 
    
                        ctx.drawImage(img, 0, 0, width, height);  
    
                        
                        var dataURL = canvas.toDataURL('image/jpeg', 1);
                        var blob = dataURItoBlob(dataURL); 
                        if(blob.size > 2000 * 1024){
                            dataURL = canvas.toDataURL('image/jpeg', .2);
                        }else if(blob.size > 1000 * 1024){
                            dataURL = canvas.toDataURL('image/jpeg', .5);
                            
                        }else{
                            dataURL = canvas.toDataURL('image/jpeg', .8);
                        }
                        blob = dataURItoBlob(dataURL);
                        deferred.resolve(blob);
                    }
                    img.src = URL.createObjectURL(file);

                    
                });
            };
        };

        var onError = function(reader, deferred, scope) {
            return function() {
                scope.$apply(function() {
                    deferred.reject(reader.result);
                });
            };
        };

        var onProgress = function(reader, scope) {
            return function(event) {
                
                scope.$broadcast("fileProgress", {
                    total: event.total,
                    loaded: event.loaded
                });
            };
        };

        var getReader = function(deferred, scope, file) {
            var reader = new FileReader();
            reader.onload = onLoad(reader, deferred, scope,file);
            reader.onerror = onError(reader, deferred, scope);
            reader.onprogress = onProgress(reader, scope);
            return reader;
        };

        var readAsDataURL = function(file, scope) {
            var deferred = $q.defer();
            var reader = getReader(deferred, scope,file);
            reader.readAsDataURL(file);

            return deferred.promise;
        };

        return {
            readAsDataUrl: readAsDataURL
        };
    }]);

這里說明一下，部分代碼是參考別人的代碼（http://blog.csdn.net/zx007fack/article/details/41073601），但是對其中內容做了修改，因為用原來的代碼，如果不加前端壓縮功能是正常的，前端壓縮的話因為要用到canvas, 直接用reader.result在ios上圖片的寬高拿到的直接是0，android上是可以的，具體原因不是很確定是不是base64的問題，所以我又直接把file傳了進來，然后用原生js的方法新建圖片元素拿到寬高，再用Canvas進行壓縮，最后轉成blob，通過formData傳給后台。

3.controller代碼

//選擇圖片后執行的方法
        $scope.fileArr = [];
        $scope.imgSrcArr = [];var i = 0; //為ios上圖片都為image時添加序號
        $rootScope.onFileSelect = function(files, event) {
            //預覽上傳圖片開始
            $rootScope.startLoading();
            var $this = angular.element(event.target);

            angular.forEach(files, function(value, index) {
                var fileIn = value;
                var fileInName = fileIn.name;
                var fileType = fileInName.substring(fileInName.lastIndexOf(".") + 1, fileInName.length);

                //解決ios下所有圖片都為image.jpg的bug
                if(fileIn) {
                    fileInName = fileInName.split('.')[0] + i + '.' + fileType;
                    i++;
                }
                
                attachvo.push({
                    name: fileInName,
                    type: fileType
                });
                  
                fileReader.readAsDataUrl(fileIn, $scope)
                    .then(function(result) {
                        result.name = fileInName;
                        $scope.fileArr.push(result);
                        $scope.imgSrcArr.push(URL.createObjectURL(result));
　　　　　　　　　　　　　　//每次上傳后清空file框，確保每次都能調用change事件
                        document.querySelector('.upload').reset();
                        
                    });
                $scope.$on('fileProgress', function(event, data) {
                    if(data.total == data.loaded) {
                        $timeout(function() {
                            //上傳圖片結束
                            $rootScope.endLoading();
                        }, 200)

                    }

                });            

            });
            $rootScope.showAttachment = false;
        };return false;

        }

這里處理了下圖片，在名字上加了序號，因為在ios上每次選擇的圖片名字都叫image,查找了很多資料，說是safari的bug,后面版本才會解決，暫時只能以這種方式解決了。循環是上傳多張圖片

3.html代碼

<ul class="upload-view-ul">
        
        <li ng-repeat="src in imgSrcArr" class="pull-left" ng-click="delCurUpload(src)"  
            ng-class="{'row-last': (($index+1) % 5==0)}">
            <span>x</span>
            <em ng-if='nrc'>{{formData.attachvo[$index].attachmentType}}</em>
            <img ng-src="{{src}}">
        </li>
        <div class="attachment" pop-type-select ng-if="nrc">+</div>
        
        <div class="attachment" ng-if="!nrc">
            +
            <form class="upload">
                <input type="file" name="file[]"  ng-file-select="onFileSelect($files, $event)" multiple>
            </form>
        </div>
    </ul>

4.順便把formdata時代碼貼一下，采用H5上傳圖片的方式

this.FormdataPost = function(pathUrl, formId, formData, files) {
        var fd = new FormData();
        fd.append('formId', formId);
        if(files && angular.isArray(files)) {
            files.forEach(function(item) {
                fd.append('file', item, item.name);
            });
        }
        fd.append('formData', angular.toJson(formData, true));
        var httpConfig = {
            headers: {
                'Authorization': 'Bearer ' + this.token,
                'Content-Type': undefined
            },
            transformRequest: angular.identity
        };
        return $http.post(rootUrl + pathUrl, fd, httpConfig).then(function(data) {
            return data;
        }).catch(function(error) {
            $rootScope.interfaceName = pathUrl;
            $rootScope.setNewWortStatus({
                status: error.status,
                errInfo: error.data && error.data.statusInfo || ''
            });
            return error;
        });
    }

思路有一點混亂，不知道講清楚了沒有，想起來再添加吧