网页的form表单中,如果存在上传文件的表单,则需要将form标签设置enctype="multipart/form-data"属性,意思是将Content-Type设置成multipart/form-data。那么后台数据是怎么获取呢,下面就来介绍下前端示例已经后台数据的获取方法
工具/原料
idea
java
html
方法/步骤
1、首先创建一个u衡痕贤伎serPicUpload.html测试的页面,里面添加一个input的type为file的表单,将form标签添加enct烤恤鹇灭ype="multipart/form-data"属性完整的页面测试代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>测试上传</title><scriptsrc="../resources/js/jquery-validation/jquery.min.js"></script></head><body><formid="userInfoForm"method="post"action="../user/userPicUpload"enctype="multipart/form-data"><fieldset><legend>用户基本信息</legend><p><labelfor="userPic">头像</label><inputid="userPic"name="userPic"type="file"></p><p><inputclass="submit"type="submit"value="提交"></p></fieldset></form></body></html>
2、本教程示例后台代码以jav瞢铍库祢a的web服务来举例说明,采用springMVC框架,后端代码如下:@Re鳎溻趄酃questMapping("/userPicUpload")@ResponseBodypublicvoiduserPicUpload(HttpServletRequestrequest){booleanisMultipart=ServletFileUpload.isMultipartContent(request);if(isMultipart){ServletFileUploadupload=newServletFileUpload();upload.setHeaderEncoding("UTF-8");inti=0;try{FileItemIteratoriter=upload.getItemIterator(request);while(iter.hasNext()){i++;FileItemStreamfi=iter.next();InputStreamin=null;OutputStreamfileout=null;try{StringfileName=fi.getName();Filefile=newFile("f:/upload_test/"+fileName.substring(0,fileName.lastIndexOf("."))+"_"+i+fileName.substring(fileName.lastIndexOf(".")));in=fi.openStream();ByteArrayOutputStreambstream=newByteArrayOutputStream();Streams.copy(in,bstream,true);fileout=newFileOutputStream(file);bstream.writeTo(fileout);}catch(IOExceptione){thrownewRuntimeException("filecopyerror!",e);}finally{if(in!=null){try{in.close();}catch(IOExceptione){e.printStackTrace();}}if(fileout!=null){try{fileout.close();}catch(IOExceptione){e.printStackTrace();}}}}}catch(Exceptione){thrownewRuntimeException("uploadfileerror.",e);}}}
3、后端代码处理上传的内容数据是使腩柽鬣盛用commons-fileupload-1.3.jar类库来处理的,booleanisMultipart=ServletFileUpload.足毂忍珩isMultipartContent(request);判断是否是Multipart,然后ServletFileUpload获取FileItemIterator迭代FileItemStreamfi=iter.next();取出所有的上传内容项,InputStream,然后将数据写入到一个文件中运行web项目,访问页面,可以看到一个上传的表单项
4、点击上传按钮,这里我们为了测试,选择一个图片文件进行上传(为了上传之后保存的文件好验证)
5、打开网页调试工具,点击提交按钮之后,可以从调试工具的网络抓包请求中可以看到详细的Content-type和body内容
6、提交完成之后,去我们后台代码写入的F:/upload_test/目录中,查看保存之后的文件,可以看到文件从页面上传到服务端,被服务端接收之后,成功的保存到另一个文件中,并可以正常的打开,正确数据传输和保存的代码都是正确的