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"