所用插件: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"