Angularjs总结（六） 上传附件
所用插件：angular-file-upload
这个插件用到的几个指令：nv-file-select（点击选择）、uploader（用于绑定控制器中新建的uploader对象）
HTML:
1 <div> 2 <h4>坐标上传</h4> 3 <span>{{warningMessage}}</span> 4 <div> 5 <input type="text" ng-model="displayName" placeholder="请输入显示名称，不超过25个字符" maxlength="25" /> 6 <div> 7 <input type="file" id="uploader_input" accept="application/text/plain" nv-file-select uploader="uploader" /> 8 <div ><button class="attachment_upload_btn"><span>浏览</span></button></div> 9 </div> 10 </div> 11 <div class="modal-footer"> 12 <button ng-click="uploadAll()">导入</button> 13</div> 14 </div>
控制器文件：
1 var app=angular.module('app',['angularFileUpload']); 2 app.controller('Upload-controller',['$scope','FileUploader',function($scope,FileUploader){ 3 var uploader = $scope.uploader = new FileUploader({ 4 url: 'upload.php', 5 queueLimit: 1, //文件个数 6 removeAfterUpload: true, //上传后删除文件 7 autoUpload:false //不自动上传 8 }); 9 //增加相应的过滤(TXT文本过滤) 10 uploader.filters.push({ 11 name: 'formatFilter', 12 fn:funciton(item,options){ 13 var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|'; 14 return '|plain|'.indexOf(type) !== -1; 15 } 16 }); 17 //增加相应的过滤(大小过滤10M) 18 uploader.filters.push({ 19 name: 'sizeFilter', 20 fn:funciton(item,options){ 21 var filesize= item.size/1024/1024; 22 if(filesize<=10){ 23 return true; 24 }else{ 25 return false; 26 } 27 } 28 }); 29 //不满足过滤条件 30 uploader.onWhenAddingFileFailed=function(item,filter,options){ 31 $scope.uploader.clearQueue(); 32 if(filter.name=='formatFilter'){ 33 //如果名为formatFilter的过滤失败的话，下面做一些操作 34 $scope.warningMessage = '请导入TXT格式文件。'; 35 return; 36 } 37 if(filter.name=='sizeFilter'){ 38 $scope.warningMessage = '请导入小于10MB的文件'; 39 //如果名为sizeFilter的过滤失败的话，下面做一些操作 40 return; 41 } 42 } 43 //重新选择文件时，清空队列，达到覆盖文件的效果 44 $scope.clearItems = function(){ 45 uploader.clearQueue(); 46 } 47 //增加文件后，将文件名复制给相应字段 48 $scope.onAfterAddingFile=function(fileItem){ 49 $scope.displayName=fileItem.file.name; 50 } 51 //上传成功后，将服务端信息赋值给前端 52 $scope.onSuccessItem=function(fileItem, response, status, headers){ 53 //response 服务端返回值 54 } 55 $scope.uploadAll = function () { 56 uploader.uploadAll(); 57 } 58 }])
accept取值类型列表：
1 * accept="application/msexcel" 2 3 * accept="application/msword" 4 5 * accept="application/pdf" 6 7 * accept="application/poscript" 8 9 * accept="application/rtf" 10 11 * accept="application/x-zip-compressed" 12 13 * accept="audio/basic" 14 15 * accept="audio/x-aiff" 16 17 * accept="audio/x-mpeg" 18 19 * accept="audio/x-pn/realaudio" 20 21 * accept="audio/x-waw" 22 23 * accept="image/*" 24 25 * accept="image/gif" 26 27 * accept="image/jpeg" 28 29 * accept="image/tiff" 30 31 * accept="image/x-ms-bmp" 32 33 * accept="image/x-photo-cd" 34 35 * accept="image/x-png" 36 37 * accept="image/x-portablebitmap" 38 39 * accept="image/x-portable-greymap" 40 41 * accept="image/x-portable-pixmap" 42 43 * accept="image/x-rgb" 44 45 * accept="text/html" 46 47 * accept="text/plain" 48 49 * accept="video/quicktime" 50 51 * accept="video/x-mpeg2" 52 53 * accept="video/x-msvideo"
