Iframe实现Ajax文件上传Servlet响应上传结果

来源：互联网发布：蛙5火箭知乎编辑：程序博客网时间：2024/06/05 20:15

原理是form提交表单，设置target为iframe的name,iframe为隐藏，实现无刷新提交。

Servlet通过返回html代码，iframe内的页面通过parent调用主页面的回调函数，进行处理响应结果。

上传使用的commons file upload ,依赖2个jar：commons-fileupload.jar commons-io-2.2.jar。

jsp页面上的form要加上enctype为：multipart/form-data.

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function callback(msg)   {     alert(msg);  document.location.href="upload.jsp";}  </script></head><body><form action="FileServlet" method="post" enctype="multipart/form-data" name="form1" target="if1"><table><tr><td><label>email:</label></td><td><input type="text" name="email" value="abc@163.com"></td></tr><tr><td><label>file:</label></td><td><input type="file" name="file1"></td></tr><tr><td><input type="submit"  value="提交"></td></tr></table></form><iframe name="if1" style="display: none;"></iframe></body></html>

servlet

package com.file.util;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.Iterator;import java.util.List;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;public class FileServlet extends HttpServlet {protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  request.setCharacterEncoding("UTF-8");  String res="";  DiskFileItemFactory factory = new DiskFileItemFactory();  ServletFileUpload upload = new ServletFileUpload(factory);  try {   List items = upload.parseRequest(request);   Iterator itr = items.iterator();   while (itr.hasNext()) {    FileItem item = (FileItem) itr.next();    if (item.isFormField()) {     System.out.println("表单参数名:" + item.getFieldName() + "，表单参数值:" + item.getString("UTF-8"));    } else {     if (item.getName() != null && !item.getName().equals("")) {      System.out.println("上传文件的大小:" + (item.getSize()/1024)+"KB");      System.out.println("上传文件的类型:" + item.getContentType());      // item.getName()返回上传文件在客户端的完整路径名称      System.out.println("上传文件的名称:" + item.getName().substring(item.getName().lastIndexOf("\\")+1));           String path="G://temp//";      File file = new File(path+"//"+item.getName().substring(item.getName().lastIndexOf("\\")+1));      item.write(file);      System.out.println("文件上传成功");      res="文件上传成功";     }else{      System.out.println("没有选择上传文件");      res="没有选择上传失败";     }    }   }  }catch(FileUploadException e){   e.printStackTrace();  } catch (Exception e) {   e.printStackTrace();   System.out.println("文件上传失败");   res="文件上传失败";  }finally{  response.setContentType("text/html;charset=utf-8");  //可以使用字符流也可以使用字节流，写入浏览器    //字符流的写法//  PrintWriter out = response.getWriter();//  out.write("<script>parent.callback('"+res+"')</script>"); //iframe中的html解析js,加parent是调用上级页面定义的callback方法  //  out.flush();//  out.close();  //字节流的写法  String msg="<script>parent.callback('"+res+"')</script>"; //iframe中的html解析js,加parent是调用上级页面定义的callback方法  ServletOutputStream outputStream = response.getOutputStream();  outputStream.write(msg.getBytes("utf-8"));  outputStream.flush();  outputStream.close();  }  }}

0 0