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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
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 批量删除数据的方法分析
2009/10/30 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
numpy中索引和切片详解
2017/12/15 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python实现井字棋小游戏
2020/03/09 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
化工机械应届生求职信
2013/11/04 职场文书
业务代表的岗位职责
2013/11/16 职场文书
给老师的道歉信
2014/01/11 职场文书
卫生安全检查制度
2014/02/04 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
电力培训学习心得体会
2016/01/11 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python 中[0]*2与0*2的区别说明
2021/05/10 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL