网页的form表单中，如果存在上传文件的表单，则需要将form标签设置enctype="multipart/form-data"属性，意思是将Content-Type设置成multipart/form-data。那么后台数据是怎么获取呢，下面就来介绍下前端示例已经后台数据的获取方法
1/6
首先创建一个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>
<p>
<label for="userPic">头像</label>
<input id="userPic" name="userPic" type="file">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
1/6
此文章未经授权抓取自百度经验
2/6
本教程示例后台代码以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/6
后端代码处理上传的内容数据是使用commons-fileupload-1.3.jar类库来处理的，
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
判断是否是Multipart，然后ServletFileUpload获取FileItemIterator迭代
FileItemStream fi = iter.next();
取出所有的上传内容项，InputStream，然后将数据写入到一个文件中
运行web项目，访问页面，可以看到一个上传的表单项
4/6
点击上传按钮，这里我们为了测试，选择一个图片文件进行上传（为了上传之后保存的文件好验证）
5/6
打开网页调试工具，点击提交按钮之后，可以从调试工具的网络抓包请求中可以看到详细的Content-type和body内容
6/6
提交完成之后，去我们后台代码写入的F:/upload_test/目录中，查看保存之后的文件，可以看到文件从页面上传到服务端，被服务端接收之后，成功的保存到另一个文件中，并可以正常的打开，正确数据传输和保存的代码都是正确的
-
-
multipart/form-data提交后台获取数据方法
[重新阅读]
