Angularjs总结（六） 上传附件

所用插件：angular-file-upload

这个插件用到的几个指令：nv-file-select（点击选择）、uploader（用于绑定控制器中新建的uploader对象）

HTML:

 <div>
 <h4>坐标上传</h4>
 <span>{{warningMessage}}</span>
 <div>
 <input type="text" ng-model="displayName" placeholder="请输入显示名称，不超过25个字符" maxlength="25" />
 <div>
 <input type="file" id="uploader_input" accept="application/text/plain" nv-file-select uploader="uploader" />
 <div ><button class="attachment_upload_btn"><span>浏览</span></button></div>
 </div>
 </div>
 <div class="modal-footer">
 <button ng-click="uploadAll()">导入</button>
</div>
 </div>

控制器文件：

 var app=angular.module('app',['angularFileUpload']);
 app.controller('Upload-controller',['$scope','FileUploader',function($scope,FileUploader){
 var uploader = $scope.uploader = new FileUploader({
 url: 'upload.php',
 queueLimit: 1, //文件个数
 removeAfterUpload: true, //上传后删除文件
 autoUpload:false //不自动上传
 });
 //增加相应的过滤(TXT文本过滤)
 uploader.filters.push({
 name: 'formatFilter',
 fn:funciton(item,options){
 var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
 return '|plain|'.indexOf(type) !== -1;
 }
 });
 //增加相应的过滤(大小过滤10M)
 uploader.filters.push({
 name: 'sizeFilter',
 fn:funciton(item,options){
 var filesize= item.size/1024/1024;
 if(filesize<=10){
 return true;
 }else{
 return false;
 }
 }
 });
 //不满足过滤条件
 uploader.onWhenAddingFileFailed=function(item,filter,options){
 $scope.uploader.clearQueue();
 if(filter.name=='formatFilter'){
 //如果名为formatFilter的过滤失败的话，下面做一些操作
 $scope.warningMessage = '请导入TXT格式文件。';
 return;
 }
 if(filter.name=='sizeFilter'){
 $scope.warningMessage = '请导入小于10MB的文件';
 //如果名为sizeFilter的过滤失败的话，下面做一些操作
 return;
 }
 }
 //重新选择文件时，清空队列，达到覆盖文件的效果
 $scope.clearItems = function(){
 uploader.clearQueue();
 }
 //增加文件后，将文件名复制给相应字段
 $scope.onAfterAddingFile=function(fileItem){
 $scope.displayName=fileItem.file.name;
 }
 //上传成功后，将服务端信息赋值给前端
 $scope.onSuccessItem=function(fileItem, response, status, headers){
 //response 服务端返回值
 }
 $scope.uploadAll = function () {
 uploader.uploadAll();
 }
 }])

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"