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