Angularjs实现上传图片预览功能

 更新时间:2017年09月01日 11:58:05   作者:zx007fack  
本文通过实例代码给大家介绍了Angularjs实现上传图片预览功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<input type="file" ng-file-select="onFileSelect($files)" accept="image/*">
app.factory("fileReader", 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 onProgress = function(reader, scope) {
        return function (event) {
          scope.$broadcast("fileProgress",
              {
                total: event.total,
                loaded: event.loaded
              });
        };
      };
      var getReader = function(deferred, scope) {
        var reader = new FileReader();
        reader.onload = onLoad(reader, deferred, scope);
        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);
        reader.readAsDataURL(file);
        return deferred.promise;
      };
      return {
        readAsDataUrl: readAsDataURL
      };
  });

选择图片后执行的方法

$scope.onFileSelect = function(files) {
      var fileIn=files[0];
      var img = new Image();
      var fileType = fileIn.name.substring(fileIn.name.lastIndexOf(".") + 1, fileIn.name.length);
      if(fileIn.size>5242880){//单位是B,此处不允许超过5M
        alert("图片不能超过5M")
        return;
      }
      if(fileType=='JPG' || fileType=='PNG' || fileType=='JPEG ' || fileType=='jpg' || fileType=='png' || fileType=='jpeg'){
      }else{
        alert("图片格式只支持:JPG,PNG,JPEG")
        return;
      }
      fileReader.readAsDataUrl(fileIn, $scope)
          .then(function(result) {
            $scope.imageSrc = result;
            console.log(img.width);
      });
    }

总结

以上所述是小编给大家介绍的Angularjs实现上传图片预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 关于AngularJS中ng-repeat不更新视图的解决方法

    关于AngularJS中ng-repeat不更新视图的解决方法

    今天小编就为大家分享一篇关于AngularJS中ng-repeat不更新视图的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定

    这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法,1.ng内置指令,2.自定义指令,并进行比较,需要的朋友可以参考下
    2017-07-07
  • angular inputNumber指令输入框只能输入数字的实现

    angular inputNumber指令输入框只能输入数字的实现

    这篇文章主要介绍了angular inputNumber指令输入框只能输入数字的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 浅谈angular4实际项目搭建总结

    浅谈angular4实际项目搭建总结

    本篇文章主要介绍了浅谈angular4实际项目搭建总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • angular2 ng2 @input和@output理解及示例

    angular2 ng2 @input和@output理解及示例

    本篇文章主要介绍了angular2 ng2 @input和@output理解及示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 详解ionic本地相册、拍照、裁剪、上传(单图完全版)

    详解ionic本地相册、拍照、裁剪、上传(单图完全版)

    本篇文章主要介绍了ionic本地相册、拍照、裁剪、上传(单图完全版),非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • Angular @HostBinding()和@HostListener()用法

    Angular @HostBinding()和@HostListener()用法

    本篇文章主要介绍了Angular @HostBinding()和@HostListener()用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS的内置过滤器详解

    AngularJS的内置过滤器详解

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。
    2015-05-05
  • Angular获取手机验证码实现移动端登录注册功能

    Angular获取手机验证码实现移动端登录注册功能

    最近在使用angular来做项目,功能要求实现一是点击按钮获取验证码,二是点击登录验证表单。之前用jquery来做项目很好做,使用angular怎么实现呢?其实实现代码也很简单的,下面通过实例代码给大家介绍下,需要的朋友参考下吧
    2017-05-05
  • Angular实现预加载延迟模块的示例

    Angular实现预加载延迟模块的示例

    本篇文章主要介绍了Angular实现预加载延迟模块的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论