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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
使用正则替换变量
May 05 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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翻页类
2009/06/01 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
使用JS动态显示文本
2017/09/09 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
分享Python异步爬取知乎热榜
2022/04/12 Python