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>
相关文章推荐
- ASP实现文件上传的方法
- .net文件上传时实现通过文件头确认文件类型的方法
- asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传输
- ASP的chr(0)文件上传漏洞原理和解决方法介绍
- asp.net上传文件到数据库的解决方案
- javascript实现校验文件上传控件实例
- ajax 异步上传带进度条视频并提取缩略图
- AngularJS基础教程之简单介绍
- jQuery实现文件上传进度条特效
- 分享20多个很棒的jQuery 文件上传插件或教程
- jquery插件ajaxupload实现文件上传操作
- jquery插件uploadify实现带进度条的文件批量上传
- MVC中基于Ajax和HTML5实现文件上传功能
- js jquery分别实现动态的文件上传操作按钮的添加和删除
- asp.net HTML文件上传标签
- PHP中文件上传的一个问题
- 与文件上传有关的php配置参数总结
- Serv-U中禁止某类文件上传的设置方法
- PHP 文件编程综合案例-文件上传的实现
- 在服务端进行目录建立、删除,文件上传、删除的过程的php代码