前段时间做项目遇到一个需求是上传文件，大概需要实现的样式是这样子的，见下图：
需要同时上传两个文件。并且规定文件格式和文件大小。因为前端框架使用angular，且不想因为一个上传功能又引入一个jquery，所以在网上查找基于angular的上传控件，因为angular还算比较新，貌似都没有太成熟的插件，网上的教程也大多是复制粘贴，总之没起倒多大的作用...但是皇天不负有心人，最后还是让我遇到了这个功能强大的插件，让我有种相见恨晚的感觉呀，依靠官方文档和师兄的帮助，终于搞清楚了基本的使用方法。好东西要分享，所以现在跟大家分享一下他的使用方法，如果大家正好需要使用，希望能帮到大家。
上传按钮的样式
首先我想先说一下上传文件的按钮样式，为什么呢？大家都知道上传会用到这个标签。<input type="file"/>,这行代码的默认样式真的有点不好看，见下图：
在一个稍微有点逼格的网站中，这样一个样式实在是有点损失形象了，而且如果需要在前面加一个输入框来显示文件名的话，那默认的显示文件名的区域怎么隐藏掉呢？别急，继续看：
用一个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;} 大功告成了！！！你看到的样式就变成了这样了，见下图：
你可以控制前面的输入框来显示你选择了的文件名，是不是好看多了呢？
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"
这个插件还提供了很多的配置参数，对象方法和回调函数。
以上就是关于AngularJS文件上传控件的使用方法介绍，希望对大家的学习有所帮助。
