Angularjs上传图片实例详解_网络技术_宿州市腾雀网络科技有限公司

Angularjs上传图片实例详解

发布时间 - 2026-01-11 02:39:41 点击率：次

•上传图片需要引入插件ngFileUpload，使用bower安装方法： bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入，如下所示：

(function() {
  angular.module('app', [
    'ionic','ngStorage','ngFileUpload'
  ]);
})();

•在相应的html中引入文件路径：<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>

•如何使用呢？在html文件中使用 ngf-select

<div class="editHeader_div" ngf-select="setStore.uploadFiles($file, $invalidFiles)">
        <img class="editStoreImg" ng-src="img/{{setStore.img}}">
        <p>更改头像</p>
 </div>

在相应的controller中：

 //上传单个文件
    function uploadFiles(file, errFiles) {
      vm.imgInfo = file;
      console.log(file);
      if (file) {
        vm.img = file.name;//测试使用
        //Service.upload('','',{file:file})//开发使用
      }
    }

在http请求如下：

 //文件上传预设配置
      Upload.setDefaults({
        ngfAccept: "'.jpg,.png,.gif,.jpeg'",
        ngfDropDisabled: 'true',
        ngfPattern: '.jpg,.png,.gif,.jpeg',
        ngfMaxSize: '2MB'
      });
 //上传文件
      function upload(ctrl, name, param) {
        var deferred = $q.defer(),
          interfaceName = ctrl + '/' + name,
          backendDetail = getBackendDetail(interfaceName);
        //上传文件到服务器
        Upload.upload({
          url: backend.url + ':' + backendDetail.port + '/' + backendDetail.service + '/' + interfaceName,
          data: param || {}
        }).then(function(data) {
          //service返回数据
          var result = data.data;
          //200代表接口调用成功
          if (data.status === 200) {
            //数据库返回错误信息
            if (result && serviceErrors[result.returnCode]) {
              deferred.reject('Error Services');
              swal(result.message, '错误状态码：' + result.returnCode, 'error');
            } else if (!result.dataInfo) {
              deferred.reject('Error Image');
              swal('图片上传失败', '请检查图片属性', 'error');
            } else {
              deferred.resolve(result);
            }
          } else {
            deferred.reject('Error Services');
            swal('提交操作失败', '错误状态码：' + data.status, 'error');
          }
        }, function(error) {
          deferred.reject('Error Services');
          swal('提交操作失败', '错误状态码：' + error.status, 'error');
        });
        return deferred.promise;
      }

总结

以上所述是小编给大家介绍的Angularjs上传图片实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

# angularjs上传图片 # angularjs客户端实现压缩图片文件并上传实例 # 通过AngularJS实现图片上传及缩略图展示示例 # Angular下H5上传图片的方法（可多张上传） # AngularJs上传前预览图片的实例代码 # angularjs实现多张图片上传并预览功能 # angularjs点击图片放大实现上传图片预览 # angular2+nodejs实现图片上传功能 # Angularjs实现上传图片预览功能 # AngularJS实现图片上传和预览功能的方法分析 # Angular4实现图片上传预览路径不安全的问题解决 # 小编 # 上传图片 # 上传文件 # 给大家 # 所示 # 错误信息 # 所述 # 如何使用 # 给我留言 # 图片上传 # 请检查 # 文件上传 # 有任何 # 上传 # lib # editHeader_div # select # ngf # gt # div

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：phpstudy怎么启动web服务

下一篇：横沥网站设计如何兼顾SEO与用户体验？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：phpstudy怎么启动web服务

下一篇：横沥网站设计如何兼顾SEO与用户体验？