SpringMVC图片上传
2018-01-11 本文已影响18人
压根儿没快乐过
一.form表单提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/user/moreupload.action" method="post" enctype="multipart/form-data">
<input type="text" name="wenben" value=""/><br>
<input type="file" name="file" /><br>
<input type="file" name="file" /><br>
<input type="submit" value="文件上传" />
</form>
</body>
</html>
@RequestMapping("/user")
@Controller
public class duowenjianshangchuan {
/**
* file：传入的参数名称 MultipartFile：上传文件的对象，它会标识文件的类型。
*
* @param multipartFile
* @return String : 返回简写视图名称
* @throws Exception
*/
//第一种方法:这个是多文件上传,如果是一个文件的话,就
@RequestMapping("/moreupload")
public String upload(@RequestParam("file") MultipartFile[] multipartFile, HttpServletRequest request)
throws Exception {
String string = request.getParameter("wenben");
System.out.println(string);
for (MultipartFile myfile : multipartFile) {
if (myfile.isEmpty()) {
System.out.println("文件未上传");
} else {
System.out.println("文件长度: " + myfile.getSize());
System.out.println("文件类型: " + myfile.getContentType());
System.out.println("文件名称: " + myfile.getName());
System.out.println("文件原名: " + myfile.getOriginalFilename());
System.out.println("========================================");
// 如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\WEB-INF\\upload\\文件夹中
String realPath = request.getSession().getServletContext().getRealPath("/WEB-INF/upload");
System.out.println("上传到tomcat服务器的地址" + realPath);
// 这里不必处理IO流关闭的问题，因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉，我是看它的源码才知道的
// FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath,
// myfile.getOriginalFilename()));
}
}
return "redirect:/html/success.html";
}
//第二种方法,没有在方法的参数里面写 @RequestParam("file") MultipartFile[] multipartFile
@RequestMapping("/moreupload2")
public String upload2(HttpServletRequest request) throws Exception {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> files = multiRequest.getFiles("file");
for (int i = 0; i < files.size(); i++) {
System.out.println(files.get(i).getOriginalFilename());
}
return "redirect:/html/success.html";
}
}
二.ajax异步提交(H5 FormDate)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
<script src="/jquery-3.2.1.js"></script>
</head>
<body>
<div>
<input type="file" class="easyui-linkbutton" id="excelFile" name="excelFile" size="20" maxlength="20"/>
<input type="button" class="easyui-linkbutton" id="upload" style="width:80px" value="上传" />
</div>
</body>
<script>
$(document).ready(function(){
function ajaxFileUpload(){
var formData = new FormData();
formData.append('file',$("#excelFile")[0].files[0]); //将文件转成二进制形式
$.ajax({
type:"post",
url:"http://localhost:8080/fileupload",
async:false,
contentType: false, //这个一定要写
processData: false, //这个也一定要写，不然会报错
data:formData,
dataType:'text', //返回类型，有json，text，HTML。这里并没有jsonp格式，所以别妄想能用jsonp做跨域了。
success:function(data){
alert(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown, data){
alert(errorThrown);
}
});
}
$("#upload").click(function(){
ajaxFileUpload();
});
});
</script>
</html>
@RequestMapping(value="fileupload", method=RequestMethod.POST,produces="text/html;charset=utf-8")
public void addPic(HttpServletResponse response,HttpServletRequest request,
@RequestParam(value="file", required=false) MultipartFile file) throws IOException{
System.out.println(file.getOriginalFilename());
response.getWriter().write("success");
response.setHeader("Access-Control-Allow-Origin", "*");
}
