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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
js 金额文本框实现代码
Feb 14 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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
菜鸟学PHP之Smarty入门
2007/01/04 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python脚本实现验证码识别
2018/06/07 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
外科实习自我鉴定
2013/10/06 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
小学生开学感言
2014/02/28 职场文书
导游个人求职信
2014/04/25 职场文书
银行求职信怎么写
2014/05/26 职场文书
本科应届生自荐信
2014/06/29 职场文书
公司委托书怎么写
2014/08/02 职场文书
授权委托书(完整版)
2014/09/10 职场文书