1、首先创建一个u衡痕贤伎serPicUpload.html测试的页面,里面添加一个input的type为file的表单,将form标签添加enct烤恤鹇灭ype="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>
2、本教程示例后台代码以java的web服务来举例说明,采用springMVC框架,后端代码如下:@Re鳎溻趄酃questMapping("/userPicUpload")@ResponseBodypublic 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/目录中,查看保存之后的文件,可以看到文件从页面上传到服务端,被服务端接收之后,成功的保存到另一个文件中,并可以正常的打开,正确数据传输和保存的代码都是正确的