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字符串处理性能的代码
Dec 07 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
js常见遍历操作小结
Jun 06 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
JS实现拼图游戏
Jan 29 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP编码转换
2012/11/05 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
常用python编程模板汇总
2016/02/12 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
如何获得EntityManager
2014/02/09 面试题
模特职业生涯规划范文
2014/02/26 职场文书
宿舍标语大全
2014/06/19 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android