Angularjs實現(xiàn)多圖片上傳預覽功能

更新時間：2018年07月18日 11:47:34 作者：小瘋瘋0413

這篇文章主要介紹了Angularjs實現(xiàn)多圖片上傳預覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近要實現(xiàn)一個多圖片上傳的預覽功能，網(wǎng)上有很多例子大多不太完整，我就把他們的整合了下并且加了一些功能和界面，我們只需要調(diào)用一條指令就可以實現(xiàn)，但傳給后臺還需要額外的代碼，會在后面controller里介紹。不知道封裝的是否符合標準，還希望大家一起討論下,如果有時間封裝下Angular4的圖片上傳和預覽分享給大家。

圖片上傳的預覽，我們最主要解決的是拿到input的on-change事件，再是讀取圖片，讀取圖片我們需要用到FileReader。

我們先寫一個讀取圖片的服務，這是網(wǎng)上的一位大佬寫的，我就直接拿了過來

/**
 * 圖片上傳獲取返回的url
 */
      app .factory('fileReader', ["$q", "$log", function($q, $log){
        var onLoad = function(reader, deferred, scope) {
          return function () {
            scope.$apply(function () {
              deferred.resolve(reader.result);
            });
          };
        };

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

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

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

        };

        return {
          readAsDataUrl: readAsDataURL 
      };
}])

我們現(xiàn)在有了圖片的讀取，我們再來搞定圖片的on-change事件

/**
 * 圖片上傳預覽
 */
app .directive('file', ['$parse', 'fileReader', function ($parse, fileReader) { 
      return {
        restrict: 'A',
        link: function(scope, element, attrs, ngModel) {

          var model = $parse(attrs.file);
          var modelSetter = model.assign;
          console.log(modelSetter)
          element.bind('change', function(event){
            scope.$apply(function(){
              modelSetter(scope, element[0].files[0]);
            });
            //附件預覽         
               scope.imgupload = (event.srcElement || event.target).files[0];
               getFile(scope.imgupload, scope);

              //獲得預覽圖地址并且把file對象放入上傳合集內(nèi)
               function getFile (imgupload, scope) {
                 if(!imgupload) {
                   return;
                 }
                 fileReader.readAsDataUrl(imgupload, scope)
                        .then(function(result) {
                         scope.imgshows.push(result)
                         var file = document.querySelector('input[type=file]').files[0];
                         scope.uploadimgs.push(file)//這里是放著傳給后臺的數(shù)據(jù)file，下面controller的時候會有
                        });
               };
          });
        }
      };
    }])

這里就是提供上傳圖片預覽的樣式，還有預覽圖刪除的功能

app .directive('uploadimg', function () { 
      return {
        restrict: 'E', 
        scope: {
          uploadimgs: "="
        },
        templateUrl: './js/directives/uploadimg/uploadimg.html',      
        link: function(scope, element, attrs) {
            scope.imgshows = []//預覽圖片合集放的是src    
            scope.uploadimg_del = function(index,imgs) {  
                scope.imgshows.splice(index,1);
                scope.uploadimgs.splice(index,1);
      }
     }
 }
})

<style type="text/css">
.fileupload {
  width: 100px;
  height: 100px;
  border: 1px dotted #ccc;
  display: inline-block;
}
.fileupload-icon {
  font-size:32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
<div>
  <div class="fileupload pos-rlt" ng-repeat="imageSrc in imgshows">
    <img ng-src="{{imageSrc}}" style="max-width:200px;max-height:300px;margin:0 auto; display:block;" class="pos-rlt" width=100%; height=100%;/>
    <i class="icon ion-close-circled" style="position: absolute; top:5px; right: 5px" ng-click="uploadimg_del($index, imgshows)"></i>
  </div>
  <div class="fileupload pos-rlt clear" >
    <i class="icon ion-plus-round fileupload-icon"></i>
    <input type="file" style="display:inline-block; width: 100%; height: 100%; opacity:0" name="upload_img" file="upload_img" placeholder="選擇圖片" accept="image/png,image/gif,image/jpeg,image/jpg"  >
  </div>
</div>
</label>

最后的調(diào)用也很簡單
我們只需要在2個地方加代碼一個是在界面，一個是在Controller里

<uploadimg uploadimgs="uploadimgs"></uploadimg>

這個是在Controller里的，這是用來傳給后臺的數(shù)據(jù)集合，我們需要傳給后臺的是file對象

$scope.uploadimgs = []//上傳圖片合集放的是file對象

如何傳給后臺呢，直接附上代碼，其實不難

$scope.save = function() {     
    var Fromdata = {
      'name': $scope.form.name,
      'desc': $scope.form.descr,
      'price': $scope.form.price,
      'status': $scope.form.status?1:0,

    }
    var uploadData = createFromData(Fromdata)
    for(var i = 0; i < $scope.uploadimgs.length; i++) {
      uploadData.append('upload_imgs', $scope.uploadimgs[i])
    }

     $http({
     method:'POST',
     url:"后臺地址",
     data: fd,
     headers: {'Content-Type':undefined},
     transformRequest: angular.identity
     })
     .success( function(response){
     //上傳成功的操作

     });

   }  

//構(gòu)造FormData
//@param 是一個對象
function createFromData(Fromdata) {
   var fd = new FormData();
   for(key in Fromdata) {
     fd.append(key,Fromdata[key]); 
   }
   return fd
}

最后給大家看下預覽圖