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


Posted in Javascript onJuly 18, 2018

最近要实现一个多图片上传的预览功能,网上有很多例子大多不太完整,我就把他们的整合了下并且加了一些功能和界面,我们只需要调用一条指令就可以实现,但传给后台还需要额外的代码,会在后面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}}" 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>

最后的调用也很简单
我们只需要在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实现多图片上传预览功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 #Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 #Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 #Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 #Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 #Javascript
webpack4.x打包过程详解
Jul 18 #Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 #Javascript
You might like
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python使用Geany编辑器配置方法
2020/02/21 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
新学期决心书
2014/03/11 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
实施意见格式范本
2015/06/05 职场文书
金榜题名主持词
2015/07/02 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
高中物理教学反思
2016/02/19 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
整理Python中常用的conda命令操作
2021/06/15 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
go goth封装第三方认证库示例详解
2022/08/14 Golang