Angularjs上传图片实例详解


Posted in Javascript onAugust 06, 2017

•上传图片需要引入插件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上传图片实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
jQuery链使用指南
Jan 20 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
JS实现简单的表格增删
Jan 16 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
微信小程序 自定义消息提示框
Aug 06 #Javascript
最通俗易懂的javascript变量提升详解
Aug 05 #Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 #Javascript
js分页之前端代码实现和请求处理
Aug 04 #Javascript
微信小程序 rich-text的使用方法
Aug 04 #Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 #Javascript
JS中使用media实现响应式布局
Aug 04 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python多线程多进程实例对比解析
2020/03/12 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
电厂职工自我鉴定
2014/02/20 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
我爱我家教学反思
2014/05/01 职场文书
班级活动总结格式
2014/08/30 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2014年质量工作总结
2014/11/22 职场文书
党员年终个人总结
2015/02/14 职场文书
值班管理制度范本
2015/08/06 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android