成都网站建设设计

将想法与焦点和您一起共享

Angular.jsng-file-upload结合springMVC的使用教程

前言

成都创新互联服务项目包括中站网站建设、中站网站制作、中站网页制作以及中站网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,中站网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到中站省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

本文主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC使用的相关内容,对于Angular.js文件上传控件ng-file-upload不熟悉的朋友们可以先看看这篇文章(传送门),下面话不多说,来看看详细的使用介绍:

引入angular和ng-file-upload。

前端代码

Upload.upload({
 url: 'upload',
 fields: {'username': 'zouroto'}, // additional data to send
 file: file
 }).progress(function (evt) {
 var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
 console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
 }).success(function (data, status, headers, config) {
 console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
 });

springMVC代码:

@Controller
public class UiController {

 @ResponseStatus(HttpStatus.OK)
 @RequestMapping(value = "/upload")
 public void upload(@RequestParam("file") MultipartFile file, @RequestParam("username") String username ) throws IOException {

 byte[] bytes;

 if (!file.isEmpty()) {
  bytes = file.getBytes();
  //store file in storage
 }

 System.out.println(String.format("receive %s from %s", file.getOriginalFilename(), username));
 }

}

application config

 
 
 

maven

 
  commons-fileupload
  commons-fileupload
  1.3.1
 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。


本文标题:Angular.jsng-file-upload结合springMVC的使用教程
文章来源:http://chengdu.cdxwcx.cn/article/gejpjs.html