multipart/form-data提交后台获取数据方法
1、首先创建一个userPicUpload.html测试的页面,里面添加一个input的type为file的表单,将form标签添加enctype="multipart/form-data"属性
完整的页面测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试上传</title>
<script src="../resources/js/jquery-validation/jquery.min.js"></script>
</head>
<body>
<form id="userInfoForm" method="post"
action="../user/userPicUpload" enctype="multipart/form-data">
<fieldset>
<legend>用户基本信息</legend>
<label for="userPic">头像</label>
<input id="userPic" name="userPic" type="file">
<input class="submit" type="submit" value="提交">
</fieldset>
</form>
</body>
</html>

2、本教程示例后台代码以java的web服务来举例说明,采用springMVC框架,后端代码如下:
@RequestMapping("/userPicUpload")
@ResponseBody
public void userPicUpload(HttpServletRequest request){
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if(isMultipart){
ServletFileUpload upload = new ServletFileUpload();
upload.setHeaderEncoding("UTF-8");
int i = 0;
try {
FileItemIterator iter = upload.getItemIterator(request);
while(iter.hasNext()){
i++;
FileItemStream fi = iter.next();
InputStream in = null;
OutputStream fileout = null;
try {
String fileName = fi.getName();
File file = new File("f:/upload_test/"+ fileName.substring(0, fileName.lastIndexOf(".")) + "_" + i + fileName.substring(fileName.lastIndexOf(".")));
in = fi.openStream();
ByteArrayOutputStream bstream = new ByteArrayOutputStream();
Streams.copy(in, bstream, true);
fileout = new FileOutputStream(file);
bstream.writeTo(fileout);
} catch (IOException e) {
throw new RuntimeException("file copy error!",e);
}finally{
if(in != null){
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(fileout != null){
try {
fileout.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
} catch (Exception e) {
throw new RuntimeException("upload file error.",e);
}
}
}

3、后端代码处理上传的内容数据是使用commons-fileupload-1.3.jar类库来处理的,
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
判断是否是Multipart,然后ServletFileUpload获取FileItemIterator迭代
FileItemStream fi = iter.next();
取出所有的上传内容项,InputStream,然后将数据写入到一个文件中
运行web项目,访问页面,可以看到一个上传的表单项

4、点击上传按钮,这里我们为了测试,选择一个图片文件进行上传(为了上传之后保存的文件好验证)

5、打开网页调试工具,点击提交按钮之后,可以从调试工具的网络抓包请求中可以看到详细的Content-type和body内容

6、提交完成之后,去我们后台代码写入的F:/upload_test/目录中,查看保存之后的文件,可以看到文件从页面上传到服务端,被服务端接收之后,成功的保存到另一个文件中,并可以正常的打开,正确数据传输和保存的代码都是正确的
