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

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

图片上传的预览，我们最主要解决的是拿到投入的变化中事件，再是读取图片，读取图片我们需要用到文件阅读器。

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

/** * 图片上传获取返回的url */app .工厂(' fileReader '，['$q '，' $log '，函数($q，$ log){ var OnLoad=function(reader，delivered，scope) { return function () { scope .$ apply(function(){已交付。解决(读者。结果)；});};};var onError=function (reader，delivered，scope) { return function () { scope .$ apply(function(){已交付。拒绝(读者。结果)；});};};var getReader=函数(延迟，作用域){ var reader=new file reader()；//文件阅读器阅读器。onLoad=OnLoad(读取器，延迟，作用域);reader.onerror=onError(reader，delivered，scope)；返回阅读器；};var readAsDataURL=函数（文件，范围){ var delived=$ q . delived()；var reader=getReader(延迟，作用域);reader.readAsDataURL(文件);延期归还。};返回{ readAsDataURL : readAsDataURL }；}])我们现在有了图片的读取，我们再来搞定图片的变化中事件

/** * 图片上传预览*/app .指令(' file '，['$parse '，' fileReader '，函数($parse，file reader){ return { restrict : ' A '，link: function(scope，element，attrs，ng model){ var model=$ parse(attrs。文件)；var model setter=model . assigncon sole . log(model setter)元素。绑定('更改'，函数(事件){范围.$apply(function(){ modelSetter(作用域，元素[0])。文件[0]);});//附件预览范围。imgupload=(事件。srcelement | |事件。目标).文件[0];getFile(scope.imgupload，scope)；//获得预览图地址并且把文件对象放入上传合集内函数getFile (imgupload，scope) { if(！imgupload){ return；} FileReader。ReadAsDataURl(imgupload，作用域)。然后(函数(结果){范围。imgshows。推送(结果)var文件=文档。查询选择器(' input[type=file]).文件[0];scope.uploadimgs.push(文件)//这里是放着传给后台的数据文件，下面控制器的时候会有});};});} };}]) 这里就是提供上传图片预览的样式，还有预览图删除的功能

应用程序.指令(' uploadimg '，函数(){ return { restrict: 'E '，scope: { uploadimgs: '=' }，templateUrl: ' ./js/指令/uploadimg/uploadimg.html '，链接：函数（作用域、元素、属性){ scope.imgshows=[]//预览图片合集放的是src范围。uploadimg _ del=function(index，imgs){ scope。imgshows。拼接(索引，1)；scope.uploadimgs.splice(索引，1);} } }})

样式类型='text/css ' .fileupload { width: 100px高度： 100像素；border: 1px虚线# cccdisplay:内联块；}.文件上传-图标{ font-size :32 px绝对位置：前：名50%；左侧： 50%;transform: translate(-50%，-50%)；}/style div div class='文件上传pos-rlt ' ng-repeat=' img鞋中的imageSrc ' img ng-src=' http : { { imageSrc } } ' style=' max-width :200 px；最大高度：300 pxmargin:0自动显示：block'class='pos-rlt '宽度=100%;高度=100%;/I class=' icon ion-close-circulated ' style='位置：绝对值；top :5 pxright : 5px ' ng-click=' uploadimg _ del($ index，imgshows)'/I/div class='文件上传pos-rlt clear ' I class=' icon-plus-round文件上传-icon '/I输入类型=' file ' style=' display : inline-block；宽度： 100%;高度： 100%;opa city 33600 ' name=' upload _ img ' file=' upload _ img ' placeholder='选择图片接受='image/png，image/gif，image/jpeg，image/jpg '/div/div/标签最后的调用也很简单我们只需要在2个地方加代码一个是在界面，一个是在控制器里

uploadimg uploadimg=' uploadimg '/uploadimg这个是在控制器里的，这是用来传给后台的数据集合，我们需要传给后台的是文件对象

$scope.uploadimgs=[]//上传图片合集放的是文件对象如何传给后台呢，直接附上代码，其实不难

$ scope。save=function(){ var Fromdata={ ' name ' : $ scope。形式。名称，' desc ' :美元范围。形式。desr，' price': $scope.form.price，' status': $scope.form.status？1:0，} var uploadData=从数据(from data)创建for(var I=0；I $ scope。上传。长度；I){ uploaddata。追加(' upload _ imgs '，$ scope。uploadimgs[I]))} $ http({方法： ' POST '，url: '后台地址，数据： fd，标题RS : { '内容类型' :未定义}，转换请求：角度。身份}).成功（功能（响应){ //上传成功的操作});} //构造FormData//@param是一个对象函数从数据创建(从数据){ var FD=new FormData()；用于(来自数据中的键){ fd.append(键，Fromdata[键]);}返回fd}最后给大家看下预览图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。