场景,需要上传附近但不刷新当前页面信息。
前段jsp代码
1 <!DOCTYPE html> 2 <html><head> 3 <title></title> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 6 </head> 7 <script src="js/jquery-1.7.1.min.js"></script> 8 9 <body> 10 <button id="Photograph">拍照</button> 11 <form id="cardForm" enctype="multipart/form-data" method="post"> 12 <input type="file" name="file1" id="file1" accept="image/*" capture="camera" style="display: none;"> 13 </form> 14 <textarea id="text" STYLE=" 400px;height: 200px"></textarea> 15 <script type="text/javascript"> 16 $(function () { 17 $("#Photograph").click(function () { 18 $("#file1").trigger("click"); 19 20 }); 21 22 $("#file1").change(function () { 23 var url=new FormData($("#cardForm")[0]); 24 /** 25 * 使用ajax提交form表单的上传文件, 26 * 首先要使用FormData的获取表单的上次文件数据, 27 * 在ajax中设置contentType:false,processData:false,cache:false,这三个属性必须为false具体原因就不清楚了 28 * 但可以简单说下这3个属性的作用: 29 * cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true,因为是文件类型数据不需要缓存 30 * contentType 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。false就是不指定类型 31 * processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。关键应该在这里,因为我们上传的是文件类型数据,如果 32 * 不设置processData:false请求就好将文件类型数据去转换为字符串会导致js报错。 33 */ 34 $.ajax({ 35 url:"Servlet", 36 type:"post", 37 contentType:false, 38 processData:false, 39 cache:false, 40 data:url, 41 success:function (data) { 42 $("#text").text(data); 43 console.log(data); 44 } 45 }); 46 }); 47 }); 48 49 </script> 50 </body></html>
后端Servlet代码:当然如果是SpringMVC等框架的话,前段不需要改动将后端按照SpringMvc的方式修改就可以了。
http://www.cnblogs.com/gynbk/p/6556270.html 上传文件代码地址
使用Commons-FileUpload组件实现文件上传
1. 创建上传对象
创建一个工厂对象
DiskFileItemFactory factory=new DiskFileItemFactory ();
创建一个新的文件上传对象
ServletFileUpload upload=new ServletFileUpload(factory);
2. 解析上传请求
通过parseRequest()方法获取全部表单项。
Public List parseRequest(HttpServletRequest request) throws FileUploadException
通过isFormField()方法判断表单项是文件域还是普通表单域。如果返回true说明是普通表单域。
Public Boolean isFormField()
通过FileItem类的getName()方法实现获取文件上传名称。
getSize()方法获得文件上传的大小。
getContentType()方法获得上传文件的类型。
上传文件实例
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String ctname; //获得文件上传的真实地址 String fileDir=request.getRealPath("upload/"); String mesg="文件上传成功"; String address=""; //判断是否上传文件 if(ServletFileUpload.isMultipartContent(request)){ //创建一个工厂对象 DiskFileItemFactory factory=new DiskFileItemFactory(); //设置内存中允许存储的字节 factory.setSizeThreshold(20*1024); //设置存放临时文件的路径 factory.setRepository(factory.getRepository()); //创建一个上传文件的对象 ServletFileUpload upload=new ServletFileUpload(factory); //设置上传文件大小 int size=4*1024*1024; //保存上传文件的集合对象 List list=null; try { //获得上传文件列表 list=upload.parseRequest(request); } catch (FileUploadException e) { // TODO Auto-generated catch block e.printStackTrace(); } //创建迭代器 Iterator iter=list.iterator(); //循环迭代 while(iter.hasNext()){ //创建FileItem对象,获得每一个上传文件 FileItem flie=(FileItem)iter.next(); //判断是文件域或普通表单域 if(!flie.isFormField()){ //获得文件名称 String name=flie.getName(); //判断文件大小是否超过设定文件大小 if(flie.getSize()>size){ mesg="文件过大,无法上传"; } //获取上传文件大小 String ctsize=new Long(flie.getSize()).toString(); //判断文件是否存在 if((name==null || name.equals("")) && ctsize.equals("0")){ mesg="文件为空。"; continue;//文件为空跳出本次循环 } //创建上传文件的名称 ctname=name.substring(name.lastIndexOf("\")+1,name.length()); address=fileDir+"\"+ctname; //创建File对象,根据文件地址创建一个空文件 File file=new File(address); try { //向创建的文件中写入数据 flie.write(file); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } } } } //返回文本内容的方式 response.setCharacterEncoding("utf-8"); response.getWriter().write(mesg); //RequestDispatcher 跳转页面方式 //request.setAttribute("msg", mesg); dispatcher=request.getRequestDispatcher("Deal.jsp"); //执行转发 //dispatcher.forward(request, response); doGet(request, response); }