用iframe模拟ajax上传文件
项目中同事使用AjaxFrom上传文件时后台保存成功，而前台确不进回调函数。自己也没去解决掉这个问题，后来同事介绍说用iframe模拟Ajax，自己从网上也看到了一些iframe做伪Ajax上传的，感觉也算是一个小技巧，故而在此记录一下。网上说，直接用$.post在上传文本信息没有问题，但是直接上传图片就不行了。当然其实这个我们也可以使用封装好的flash方法，但是封装好的东西灵活性差，而且也不见得都会对flash进行修改。所以iframe模拟就是一个比较不错的选择。
iframeAjax.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"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><script type="text/javascript" src="./res/js/jquery-1.8.2.js"></script><title>Iframe 模拟AJax提交</title><script type="text/javascript">function uploadImg() {var names = $("#imageId").val().split(".");if (names != "gif" && names != "GIF" && names != "jpg"&& names != "JPG" && names != "png" && names != "PNG") {$("#errorTip").html("海报必须为gif,jpg,png格式");$("#errorTip").show();return;}$("#formId").submit();}function callback(success, message, url) {if (success == false) {$("#errorTip").html(message);$("#errorTip").show();} else {$("#errorTip").hide();$("#successTip").html(message);$("#successTip").show();$("#img").attr("src", "uploads/" + url);$("#img").show();}}</script></head><body><form id="formId" action="IframeAjax" method="post"target="hiddenFrameName" enctype="multipart/form-data"><div><label>附件：</label> <input id="imageId" type="file" name="imageName"onchange="uploadImg()" /><div style="display: none; color: red;" id="errorTip">活动海报不可为空</div><div style="display: none; color: green;" id="successTip"></div></div></form><iframe style="display: none" name='hiddenFrameName' id="hidden_frame"></iframe><img id="img" src="" width="80" height="80" style="display: none;" /></body></html>说明：
form表单中action正常填写处理文件上传的操作。target填写一个隐藏的iframe的name。这样表单提交之后，文件会被上传，但是页面却不会刷新，因为表单提交后被刷新页面为隐藏的iframe，因此用户看到的效果和ajax处理的效果是一样的。
同时我们知道Ajax另一个就是回调处理，那么我们这里也可以定义几个需要回调处理的JS方法，然后在后台调用。
IframeAjax.java（这里我直接采用的Servlet处理，原理都是一样的）
package com.iflytek.demo;import java.io.File;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;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.FileItemFactory;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;/** * Servlet implementation class IframeAjax */public class IframeAjax extends HttpServlet {private static final long serialVersionUID = 1L;/** * Default constructor. */public IframeAjax() {// TODO Auto-generated constructor stub}/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 这里是取得WebContent的根目录路径String realPath = request.getSession().getServletContext().getRealPath("/");// 这里是为了方便管理上传的文件，因而在根目录下建立一个文件夹File uploadPath = new File(realPath, "uploads");uploadPath.mkdirs();// 解决Servelt to js乱码问题response.setContentType("text/html;charset=UTF-8");// 判断是否是带有附件的上传boolean isMultipart = ServletFileUpload.isMultipartContent(request);if (isMultipart) {FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);ArrayList<String> pics = new ArrayList<String>();try {@SuppressWarnings("unchecked")List<FileItem> items = upload.parseRequest(request);for (FileItem f : items) {if (f.isFormField()) {// 说明是表单项} else {// 说明是文件String srcName = f.getName();// 取得上传时的文件名srcName = srcName.toLowerCase();// 统一将文件名改为小写String extName = "";// 扩展名int pos = srcName.lastIndexOf('.');// 因为有的文件上传它可能没有扩展名，所以这里注意要进行一步判断，判断后再取得.扩展名if (pos != -1) {extName = srcName.substring(pos);}// 取得当前时间的纳秒数加扩展名来做保存文件的文件名String name = System.nanoTime() + extName;File file = new File(uploadPath, name);f.write(file);// 保存到指定的目录中去pics.add(name);}}} catch (Exception e) {response.getWriter().write("<script>parent.callback(false,'图片上传失败','')</script>");}response.getWriter().write("<script>parent.callback(true,'图片上传成功','" + pics.get(0) + "')</script>");// 一般如果是直接表单提交的方法需要返回// request.getRequestDispatcher("iframeAjax.jsp").forward(request,// response);}}}小感：找找总会有方法的。
页:
[1]