springmvc 文件异步上传（ocupload.js）

84 阅读 0 评论 56 点赞

我是靠谱客的博主幸福火，最近开发中收集的这篇文章主要介绍springmvc 文件异步上传（ocupload.js），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

后端:

1、首先依赖这两个包

<dependency>
           <groupId>commons-fileupload</groupId>
           <artifactId>commons-fileupload</artifactId>
           <version>1.3.1</version>
       </dependency>
       <dependency>
           <groupId>commons-io</groupId>
           <artifactId>commons-io</artifactId>
           <version>2.4</version>
       </dependency>

2、写一个文件上传的controller

import java.io.File;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.qf.express.common.AppExcption;
import com.qf.express.common.AppResult;

@Controller
public class FileUploadController {
	
	@RequestMapping(value="/fileupload",method=RequestMethod.POST)
	@ResponseBody
	public AppResult fileupload(MultipartFile myFile) {
		File dest = new File("D:\" + myFile.getOriginalFilename());
		try {
			myFile.transferTo(dest);
		} catch (Exception e) {
                //抛出自定义异常
			throw new AppExcption(500, "上传失败");
		}
            //抛出自定义的返回给页面的结果
		return new AppResult(200, "上传成功", null);
	}
}

前端：

1、导入jquery.js 和 jquery.ocupload-1.1.2.js

<script src="static/jquery.min.js"></script>
<script src="static/other/jquery.ocupload-1.1.2.js"></script>

2、页面

<body>
	<a href="#">文件上传</a>
</body>

3、script

<script type="text/javascript">
	$("a").on("click", function(event){
		event.preventDefault();
		$("a").upload({  
            action: "fileupload",                           //你所要向服务器请求的的路径，必填
            name: 'myFile',                                 //上传组件的name的值,不写默认是file
			enctype: 'multipart/form-data',                 //mime类型，使用默认就好
            params: {},          //请求时额外传递的参数，默认是为空的   
            onSubmit: function (self, element){},          //提交表单之前触发事件
			autoSubmit: true,                   //是否自动提交，即当选择了文件，自动关闭了选择窗口后，
 				//是否自动提交请求。
            onComplete: function (data, self, element){}   //提交表单完成后触发的事件
        });   
	})
</script>