Angular下H5上传图片的方法(可多张上传)


Posted in Javascript onJanuary 09, 2017

最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决

angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西。

1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码

angular.module('myApp')
.directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $timeout) {
    return function(scope, elem, attr) {
      var fn = $parse(attr['ngFileSelect']);
      elem.bind('change', function(evt) {
        var files = [], fileList, i;
        fileList = evt.target.files;
        if (fileList != null) {
          for (i = 0; i < fileList.length; i++) {
            files.push(fileList.item(i));
          }
        }
        $timeout(function() {
          fn(scope, {
            $files : files,
            $event : evt
          });
        });
      });
    };
  }])

2.服务 上传文件前预览并压缩图片功能

//上传文件预览
angular.module('myServers',[])
  .factory('fileReader', ['$q', '$log', function($q, $log) {
    var dataURItoBlob = function(dataURI) { 
      // convert base64/URLEncoded data component to raw binary data held in a string 
      var byteString; 
      if (dataURI.split(',')[0].indexOf('base64') >= 0) 
        byteString = atob(dataURI.split(',')[1]); 
      else 
        byteString = unescape(dataURI.split(',')[1]); 
      // separate out the mime component 
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
      // write the bytes of the string to a typed array 
      var ia = new Uint8Array(byteString.length); 
      for (var i = 0; i < byteString.length; i++) { 
        ia[i] = byteString.charCodeAt(i); 
      } 
      return new Blob([ia], { 
        type: mimeString 
      }); 
    }; 
    var onLoad = function(reader, deferred, scope,file) {
      return function() {
        scope.$apply(function() {
           var img = new Image();
          //前端压缩图片
          img.onload = function(){ 
            //resize the image using canvas 
            var canvas = document.createElement("canvas"); 
            var ctx = canvas.getContext("2d"); 
            var width = img.width; 
            var height = img.height; 
            var MAX_WIDTH = width>2500 ? width/2 : 2500; 
            var MAX_HEIGHT = height>2500 ? height/2 : 2500;
            if (width > height) { 
              if (width > MAX_WIDTH) { 
                height *= MAX_WIDTH / width; 
                width = MAX_WIDTH; 
              } 
            } else { 
              if (height > MAX_HEIGHT) { 
                width *= MAX_HEIGHT / height; 
                height = MAX_HEIGHT; 
              } 
            }
            canvas.width = width ; 
            canvas.height = height; 
            ctx.drawImage(img, 0, 0, width, height); 
            var dataURL = canvas.toDataURL('image/jpeg', 1);
            var blob = dataURItoBlob(dataURL); 
            if(blob.size > 2000 * 1024){
              dataURL = canvas.toDataURL('image/jpeg', .2);
            }else if(blob.size > 1000 * 1024){
              dataURL = canvas.toDataURL('image/jpeg', .5);
            }else{
              dataURL = canvas.toDataURL('image/jpeg', .8);
            }
            blob = dataURItoBlob(dataURL);
            deferred.resolve(blob);
          }
          img.src = URL.createObjectURL(file);
        });
      };
    };
    var onError = function(reader, deferred, scope) {
      return function() {
        scope.$apply(function() {
          deferred.reject(reader.result);
        });
      };
    };
    var onProgress = function(reader, scope) {
      return function(event) {
        scope.$broadcast("fileProgress", {
          total: event.total,
          loaded: event.loaded
        });
      };
    };
    var getReader = function(deferred, scope, file) {
      var reader = new FileReader();
      reader.onload = onLoad(reader, deferred, scope,file);
      reader.onerror = onError(reader, deferred, scope);
      reader.onprogress = onProgress(reader, scope);
      return reader;
    };
    var readAsDataURL = function(file, scope) {
      var deferred = $q.defer();
      var reader = getReader(deferred, scope,file);
      reader.readAsDataURL(file);
      return deferred.promise;
    };
    return {
      readAsDataUrl: readAsDataURL
    };
  }]);

这里说明一下,部分代码是参考别人的代码(http://blog.csdn.net/zx007fack/article/details/41073601),但是对其中内容做了修改,因为用原来的代码,如果不加前端压缩功能是正常的,前端压缩的话因为要用到canvas, 直接用reader.result在ios上图片的宽高拿到的直接是0,android上是可以的,具体原因不是很确定是不是base64的问题,所以我又直接把file传了进来,然后用原生js的方法新建图片元素拿到宽高,再用Canvas进行压缩,最后转成blob,通过formData传给后台。

3.controller代码

//选择图片后执行的方法
    $scope.fileArr = [];
    $scope.imgSrcArr = [];var i = 0; //为ios上图片都为image时添加序号
    $rootScope.onFileSelect = function(files, event) {
      //预览上传图片开始
      $rootScope.startLoading();
      var $this = angular.element(event.target);
      angular.forEach(files, function(value, index) {
        var fileIn = value;
        var fileInName = fileIn.name;
        var fileType = fileInName.substring(fileInName.lastIndexOf(".") + 1, fileInName.length);
        //解决ios下所有图片都为image.jpg的bug
        if(fileIn) {
          fileInName = fileInName.split('.')[0] + i + '.' + fileType;
          i++;
        }
        attachvo.push({
          name: fileInName,
          type: fileType
        });
        fileReader.readAsDataUrl(fileIn, $scope)
          .then(function(result) {
            result.name = fileInName;
            $scope.fileArr.push(result);
            $scope.imgSrcArr.push(URL.createObjectURL(result));






//每次上传后清空file框,确保每次都能调用change事件
            document.querySelector('.upload').reset();
          });
        $scope.$on('fileProgress', function(event, data) {
          if(data.total == data.loaded) {
            $timeout(function() {
              //上传图片结束
              $rootScope.endLoading();
            }, 200)
          }
        });      
      });
      $rootScope.showAttachment = false;
    };return false;
    }

这里处理了下图片,在名字上加了序号,因为在ios上每次选择的图片名字都叫image,查找了很多资料,说是safari的bug,后面版本才会解决,暂时只能以这种方式解决了。循环是上传多张图片

3.html代码

<ul class="upload-view-ul">
    <li ng-repeat="src in imgSrcArr" class="pull-left" ng-click="delCurUpload(src)" 
      ng-class="{'row-last': (($index+1) % 5==0)}">
      <span>x</span>
      <em ng-if='nrc'>{{formData.attachvo[$index].attachmentType}}</em>
      <img ng-src="{{src}}">
    </li>
    <div class="attachment" pop-type-select ng-if="nrc">+</div>
    <div class="attachment" ng-if="!nrc">
      +
      <form class="upload">
        <input type="file" name="file[]" ng-file-select="onFileSelect($files, $event)" multiple>
      </form>
    </div>
  </ul>

4.顺便把formdata时代码贴一下,采用H5上传图片的方式

this.FormdataPost = function(pathUrl, formId, formData, files) {
    var fd = new FormData();
    fd.append('formId', formId);
    if(files && angular.isArray(files)) {
      files.forEach(function(item) {
        fd.append('file', item, item.name);
      });
    }
    fd.append('formData', angular.toJson(formData, true));
    var httpConfig = {
      headers: {
        'Authorization': 'Bearer ' + this.token,
        'Content-Type': undefined
      },
      transformRequest: angular.identity
    };
    return $http.post(rootUrl + pathUrl, fd, httpConfig).then(function(data) {
      return data;
    }).catch(function(error) {
      $rootScope.interfaceName = pathUrl;
      $rootScope.setNewWortStatus({
        status: error.status,
        errInfo: error.data && error.data.statusInfo || ''
      });
      return error;
    });
  }

思路有一点混乱,不知道讲清楚了没有,想起来再添加吧

以上所述是小编给大家介绍的Angular下H5上传图片的方法(可多张上传),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 #Javascript
jQuery实现表格元素动态创建功能
Jan 09 #Javascript
input输入密码变黑点密文的实现方法
Jan 09 #Javascript
微信小程序 css使用技巧总结
Jan 09 #Javascript
详解Jquery Easyui的验证扩展
Jan 09 #Javascript
Javascript blur与click冲突解决办法
Jan 09 #Javascript
简单实现jQuery级联菜单
Jan 09 #Javascript
You might like
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
python实现画出e指数函数的图像
2019/11/21 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
python线程优先级队列知识点总结
2021/02/28 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
工地门卫岗位职责
2013/12/30 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
小学生植树节活动总结
2014/07/04 职场文书
大学生在校表现评语
2014/12/31 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
SQLServer之常用函数总结详解
2021/08/30 SQL Server
利用js实现简单开关灯代码
2021/11/23 Javascript
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript