学习使用AngularJS文件上传控件


Posted in Javascript onFebruary 16, 2016

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图:

学习使用AngularJS文件上传控件

需要同时上传两个文件。并且规定文件格式和文件大小。因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法。好东西要分享,所以现在跟大家分享一下他的使用方法,如果大家正好需要使用,希望能帮到大家。

上传按钮的样式
首先我想先说一下上传文件的按钮样式,为什么呢?大家都知道上传会用到这个标签。<input type="file"/>,这行代码的默认样式真的有点不好看,见下图:

学习使用AngularJS文件上传控件

在一个稍微有点逼格的网站中,这样一个样式实在是有点损失形象了,而且如果需要在前面加一个输入框来显示文件名的话,那默认的显示文件名的区域怎么隐藏掉呢?别急,继续看:

用一个a标签包住input标签,然后把input标签的opacity设为0,就可以了嘛!ok,看代码:

html:

<div>
 <input class="filename" type="text" readonly="readonly" />
 <a href="javascript:;" name="file">
  <input type="file" name="key"/>浏览
 </a>
 </div>
 <div>
 <input class="filename" type="text" readonly="readonly" />
 <a href="javascript:;" name="file">
  <input type="file" name="key"/>浏览
 </a>
 </div>

然后是css文件:

.filename{
 width: 300px;
 height: 30px;
 line-height: 30px;
}
a{
 width: 50px;
 text-align: center;
 height: 30px;
 line-height: 30px;
 position: raletive;
 cursor: pointer;
 overflow:hidden;
 display: inline-block;
}
a input{
 position: absolute:
 left: 0;
 top: 0;
 opacity: 0;
}

大功告成了!!!你看到的样式就变成了这样了,见下图:

学习使用AngularJS文件上传控件

你可以控制前面的输入框来显示你选择了的文件名,是不是好看多了呢?

学习使用AngularJS文件上传控件

angular-file-upload

例子中能够找到我们需要的文件。例子中的es5-shim.min.js文件是为老的浏览器兼容而引入的,所以这个插件真的很强大呀。

然后我们来一步步使用这个插件来实现文件上传的功能吧。

这个插件定义了几个指令:nv-file-drop、nv-file-select、uploader

从单词意思来看应该不难猜出,第一个支持文件脱拽选择,第二个是点击选择,uploader用于绑定在控制器中新建的upload对象。

html文件

<form class="form-horizontal" name="form">
 <div class="form-line">
 <label>请选择证书文件:</label><span class="small-tip">证书文件只支持.pem格式,文件大小1M以内</span>
 <div class="choose-file-area">
  <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>
  <a href="javascript:;" class="choose-book">
  <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>浏览
  </a>
 </div>
 </div>
 <div class="form-line">
 <label>请选择私钥文件:</label><span class="small-tip">私钥文件只支持.key格式,文件大小1M以内</span>
 <div class="choose-file-area">
  <input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>
  <a href="javascript:;" class="choose-key">
  <input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>浏览
  </a>
 </div>
 </div>
 <button type="submit" ng-click="UploadFile()">提交</button>
</form>

首先,注意这里需要上传两个文件,所以我创建两个upload对象,方便管理文件和处理回调函数。最后给上传按钮一个点击事件,同时处理两个对象的上传事件。

控制器文件

var app = angular.module('app', ['angularFileUpload']);
app.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
 $scope.uploadStatus = $scope.uploadStatus1 = false; //定义两个上传后返回的状态,成功获失败
 var uploader = $scope.uploader = new FileUploader({
 url: 'upload.php',
 queueLimit: 1, //文件个数 
 removeAfterUpload: true //上传后删除文件
 });
 var uploader1 = $scope.uploader1 = new FileUploader({
 url: 'upload.php',
 queueLimit: 1,
 removeAfterUpload: true 
 });
 $scope.clearItems = function(){ //重新选择文件时,清空队列,达到覆盖文件的效果
 uploader.clearQueue();
 }
 $scope.clearItems1 = function(){
 uploader1.clearQueue();
 }
 uploader.onAfterAddingFile = function(fileItem) {
 $scope.fileItem = fileItem._file; //添加文件之后,把文件信息赋给scope
 };
 uploader1.onAfterAddingFile = function(fileItem) {
 $scope.fileItem1 = fileItem._file; //添加文件之后,把文件信息赋给scope
 //能够在这里判断添加的文件名后缀和文件大小是否满足需求。
 };
 uploader.onSuccessItem = function(fileItem, response, status, headers) {
 $scope.uploadStatus = true; //上传成功则把状态改为true
 };
 uploader1.onSuccessItem = function(fileItem,response, status, headers){
 $scope.uploadStatus1 = true;
 }
 $scope.UploadFile = function(){
 uploader.uploadAll();
 uploader1.uploadAll();
 if(status){
  if(status1){
  alert('上传成功!');
  }else{
  alert('证书成功!私钥失败!');
  }
 }else{
  if(status1){
  alert('私钥成功!证书失败!');
  }else{
  alert('上传失败!');
  }
 }
 }
}])

总结
在上面的例子中,我定义了两个upload对象是因为要上传两个文件,每一次重新选择文件时应该覆盖之前选好的文件,所以如果定义一个对象时,有点不好操作覆盖的位置,而定义两个对象,在重新选择的时候,完全可以先清空当前对象的文件队列,再添加就好了。

其实后来我发现,也可以不定义两个upload对象,因为这个插件提供了一个removeFromQueue(index)方法,index是文件队列数组中文件的index值。因为是两次选择文件,所以把长度控制在2,然后每次选择的时候调用这个方法,根据位置传入0或者1就好了。

如果需要实现同一个窗口能够多选文件,使用加上<input type="file" multiple="true" />即可。

如果需要限制文件类型,可以使用<input type="file" accept="image/*" />'即可。

accept取值类型列表:

* accept="application/msexcel"

* accept="application/msword"

* accept="application/pdf"

* accept="application/poscript"

* accept="application/rtf"

* accept="application/x-zip-compressed"
 
* accept="audio/basic"

* accept="audio/x-aiff"

* accept="audio/x-mpeg"

* accept="audio/x-pn/realaudio"

* accept="audio/x-waw"

* accept="image/*"

* accept="image/gif"
 
* accept="image/jpeg"

* accept="image/tiff"

* accept="image/x-ms-bmp"

* accept="image/x-photo-cd"

* accept="image/x-png"

* accept="image/x-portablebitmap"

* accept="image/x-portable-greymap"

* accept="image/x-portable-pixmap"

* accept="image/x-rgb"

* accept="text/html"

* accept="text/plain"

* accept="video/quicktime"

* accept="video/x-mpeg2"

* accept="video/x-msvideo"

这个插件还提供了很多的配置参数,对象方法和回调函数。

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是关于AngularJS文件上传控件的使用方法介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
js正则相关知识点专题
May 10 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
javascript实现弹出层效果
Dec 10 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
JS中call/apply、arguments、undefined/null方法详解
Feb 15 #Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 #Javascript
仅30行代码实现Javascript中的MVC
Feb 15 #Javascript
理解javascript中的with关键字
Feb 15 #Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 #Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 #Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 #Javascript
You might like
PHP一些有意思的小区别
2006/12/06 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python-嵌套列表list的全面解析
2016/06/08 Python
常见python正则用法的简单实例
2016/06/21 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
韩国商务邀请函
2014/01/14 职场文书
财务出纳岗位职责
2014/02/03 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python
Python字符串常规操作小结
2022/04/03 Python