Angularjs如何实现多图片上传预览功能

小编给大家分享一下Angularjs如何实现多图片上传预览功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面controller里介绍。不知道封装的是否符合标准，还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家。

图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。

我们先写一个读取图片的服务，这是网上的一位大佬写的，我就直接拿了过来

/**  * 图片上传获取返回的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        }; }])

我们现在有了图片的读取，我们再来搞定图片的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对象放入上传合集内                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)//这里是放着传给后台的数据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}}"  class="pos-rlt" width=100%; height=100%;/>     <i class="icon ion-close-circled"  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"  name="upload_img" file="upload_img" placeholder="选择图片" accept="image/png,image/gif,image/jpeg,image/jpg"  >   </div> </div> </label>

最后的调用也很简单
我们只需要在2个地方加代码一个是在界面，一个是在Controller里

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

这个是在Controller里的，这是用来传给后台的数据集合，我们需要传给后台的是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){      //上传成功的操作      });    }   //构造FormData //@param 是一个对象 function createFromData(Fromdata) {    var fd = new FormData();    for(key in Fromdata) {      fd.append(key,Fromdata[key]);     }    return fd }

最后给大家看下预览图

看完了这篇文章，相信你对“Angularjs如何实现多图片上传预览功能”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！