您的位置:首页 > Web前端 > AngularJS

angular file upload 文件上传

2015-12-18 16:52 573 查看
上传部分

测试代码:
@Test
public void testFileUpload() throws IOException {
//假设路径和文件
UploadController uc = new UploadController();
String name = "n";
String originalFilename = "a.pdf";
String contentType = "pdf";
byte[] content = new byte[1];
MockMultipartFile1 documentService = new MockMultipartFile1();
uc.setDocumentService(documentService);
MockMultipartFile dc = new MockMultipartFile(name, originalFilename,
contentType, content);
Company co = new Company();
co.setId(2);
Department de = new Department();
de.setName("general");
Station st = new Station();
st.setId(1);
DocumentType docT = new DocumentType();
docT.setName("license");
Document doc = new Document();
doc.setDepartment(de);
doc.setStation(st);
doc.setDocumentType(docT);
doc.setName("许可证");
DocumentVersion dv = new DocumentVersion();
dv.setNumber("1");
dv.setDocument(doc);
uc.fileUpload(co, dv, dc);
//验证路径是否正确
assertEquals("companies/2/general/1/license/许可证/1.pdf",
documentService.path);
}


后台代码:
@RequestMapping(value = "/{versionId}.pdf", method = RequestMethod.POST)
public void fileUpload(@PathVariable("companyId") Company company,
@PathVariable("versionId") DocumentVersion version,
@RequestParam MultipartFile file) throws IOException {
//获取文件流
version.getDocument().setCompany(company);
String extension = file.getOriginalFilename().substring(
file.getOriginalFilename().lastIndexOf("."));// 取文件格式后缀名
InputStream input = file.getInputStream();
//保存文件
documentPersistenceService.saveDocumentFile(version, extension, input);
}


angularjs代码:
.factory('fileUpload', function ($routeParams,FileUploader, csrf, $q) {
return function ($scope) {
return {
//上传文件前对文件格式处理
beforeUpload: function(){
$scope.uploader = new FileUploader({
headers: {
' X-CSRF-TOKEN': csrf.token
}
});
$scope.uploader.filters.push({
name: 'customFilter',
fn: function (item, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|pdf|'.indexOf(type) !== -1;
}
});
$scope.uploader.onWhenAddingFileFailed = function (item, filter, options) {
alert("请选择pdf文件!");
console.info('onWhenAddingFileFailed', item, filter, options);
};
},

//直接通过路径上传文件
upload: function (url) {
for (var i = 0; i < $scope.uploader.queue.length; i++) {
$scope.uploader.queue[i].url = url;
}
$scope.uploader.uploadAll();
var uploader = $scope.uploader;
uploader.onErrorItem = function (fileItem, response, status,
headers) {
alert("文件过大,或者网络中断了!")
console.info('onErrorItem', fileItem, response, status, headers);
};

uploader.onWhenAddingFileFailed = function (item /* {File|FileLikeObject} */, filter, options) {
alert("请选择pdf文件!");
console.info('onWhenAddingFileFailed', item, filter, options);
};

uploader.onSuccessItem = function (fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
$scope.back(2);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
alert("网络中断或者文件数据过大")
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {

console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
if(uploader.queue.length==0){
$scope.back(2);
}
},
//通过文件id来上传文件
uploadById: function (id) {
var defer = $q.defer()
this.upload('companies/' + $routeParams.company_id + '/documents/versions/'
+ id +'.pdf');
return defer.promise

}
};
}
})


页面代码:
<section>
<div filters="queueLimit, customFilter">
<div class="container">
</div>
<div class="col-md-6">
//文件上传
<input type="file" nv-file-select="" uploader="uploader"/>
</div>
<div class="col-md-12" style="margin-bottom: 40px">
<table class="table">
<thead>
<tr>
<th width="50%">文件名</th>
<th ng-show="uploader.isHTML5">大小</th>
<th>Status</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong>

<div ng-show="uploader.isHTML5"
ng-thumb="{ file: item._file, height: 100 }"></div>
</td>
<td ng-show="uploader.isHTML5" nowrap>{{
item.file.size/1024/1024|number:2 }} MB
</td>
<td nowrap>
<button type="button" class="btn btn-warning btn-xs"
ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> 取消
</button>
<button type="button" class="btn btn-danger btn-xs"
ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> 移除
</button>
</td>
</tr>
</tbody>
</table>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar"
ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
</div>
</div>
</section>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angularjs 文件上传