AngularJS 文件上传控件 ng-file-upload详解


Posted in Javascript onJanuary 13, 2017

网上可以找到的 AngularJS 的文件上传控件有两个:

angular-file-upload:https://github.com/nervgh/angular-file-upload

ng-file-upload:https://github.com/danialfarid/ng-file-upload

这两个非常类似,连js文件的结构都是一样的。核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能。

按道理讲shim.js应该是可加可不加,但实测-shim.min.js必须包含,否则有js文件加载问题。但是angular-file-upload-shim.min.js这个文件在github上不存在!!!

所以用ng-file-upload!用ng-file-upload!用ng-file-upload!

angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。

 特性

支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS, PUT(html5)/POST 方法

支持使用 Flash polyfill FileAPI  跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。

当文件的内容类型使用 $upload.http()时,支持直接上传到 CouchDB,imgur 等等。支持 Angular http POST/PUT 请求的进度事件

轻量级,使用常规的 $http 来上传(支持非 HTML5 浏览器),所以提供所有 Angular $http 功能

例子

<!DOCTYPE html>
<html ng-app="app">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>文件上传</title>
 <meta charset="utf-8"/>
 <script src="JS/angular.min.js"></script>
 <script src="JS/ng-file-upload.min.js"></script>
 <script src="JS/ng-file-upload-shim.min.js"></script>
 <script>
  var app = angular.module('app', ['ngFileUpload']);
  app.controller('FileController', function ($scope, Upload) {
   $scope.uploadImg = '';
   //提交
   $scope.submit = function () {
    $scope.upload($scope.file);
   };
   $scope.upload = function (file) {
    $scope.fileInfo = file;
    Upload.upload({
     //服务端接收
     url: 'Ashx/UploadFile.ashx',
     //上传的同时带的参数
     data: {'username': $scope.username},
     //上传的文件
     file: file
    }).progress(function (evt) {
     //进度条
     var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
     console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
     //上传成功
     console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
     $scope.uploadImg = data;
    }).error(function (data, status, headers, config) {
     //上传失败
     console.log('error status: ' + status);
    });
   };
  });
 </script>
</head>

<body>
 <form ng-controller="FileController">
  <img src="{{uploadImg}}"/>
  当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/>
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div>
  <button type="submit" ng-click="submit()">submit</button>
  {{fileInfo.name}}<br/>
  {{fileInfo.size}}
 </form>
</body>

</html>

这是前端页面,后端如果用Java的话可以用commons-fileupload等文件上传类库。

注意

如果后端使用了Struts等框架,框架的过滤器会自动处理http请求中的上传的文件部分,造成在Servlet中获取不到请求的文件数据。

解决方法一是更改Struts配置文件,将文件上传的过滤器改为我们自己编写的空白过滤器

解决方法二是像submit一个带有<input type="file">的form表单一样,让Struts自动获取到上传的文件。只需要在Servlet中添加一个File类型的属性,并加入get/set方法。属性的名字一定要是file!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
bootstrap下拉菜单使用方法解析
Jan 13 #Javascript
js数组与字符串常用方法总结
Jan 13 #Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP 加密解密内部算法
2010/04/22 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Django单元测试工具test client使用详解
2019/08/02 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
应聘教师自荐书
2014/06/16 职场文书
社团活动总结模板
2014/06/30 职场文书
公司庆典欢迎词
2015/01/26 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
java解析XML详解
2021/07/09 Java/Android