ajax异步提交含有文件的表单

这几天一直在纠结这个，之前用的ajaxSubmit（）提交表单如果有文件在的话就不行了，找到了一下的方法：

按我的理解就是把form的内容转给了iframe去提交，所以当前的form是不会刷新变化的，当然如果有返回数据的话也是写到iframe里头。

WEB 2.0 的时代之所以不同，是因为大量的在页面当中使用了 ajax 使得单一页面对于用户做到无刷新的友好交互。但是一旦页面牵扯到文件上传就出现了一些问题，大家知道因为使用文件上传的话，是不能够直接通过 ajax 的方式来把文件当做参数传递给后台的，必须要通过 form 表单的形式来进行提交，from 和 ajax 本身就是对立的。在这里貌似是没有办法解决文件的 ajax 异步上传问题了，但是我们可以通过小技巧来模拟出文件的 ajax 异步提交的实现，保证页面不刷新的情况下做出文件的上传效果。

实现技术

语言：JAVA

架构：STRUTS2

页面js库支持：jquery-1.7.2

实现原理

使用传统的 ajax 提交方式肯定是不行的，所以这里就要稍微变通一下。在文件上传页面嵌入 iframe 将 iframe 的内嵌页面当做是文件提交后返回的页面。在本页面通过 iframe 页面的 onload 方法对 iframe 页面进行监听，上传成功后 irame 页面会触发 onload 方法，本页面就会捕捉到上传成功的事件，再进行返回值的获取操作。便模拟实现了 ajax 异步文件提交。

页面代码

 
       01 
       <%@ page language="java" contentType="text/html; charset=UTF-8" 
     
      @H_403_69@  
     
      02 
     
      @H_403_69@ pageEncoding="UTF-8"%> 
     
      03 
     
      @H_403_69@<%@ include file="/common/taglibs.jsp"%> 
     
      04 
      05 
     
      @H_403_69@<%@ taglib prefix="sesan" uri="/sesan"%> 
     
      06 
      07 
     
      @H_403_69@<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
     
      08 
      09 
     
      @H_403_69@<html> 
     
      10 
      11 
     
      @H_403_69@ 
     
      12 
      13 
      head14 
      15 
      title>ajax异步上传文件实现</16 
      17 
     
      18 
      19 
      linktype="text/css"rel"stylesheet"href"${ctx }/css/main.css"/> 
     
      @H_403_69@#file_upload_return{display:none;width:0;height:0;} 
     
      20 
      21 
      "${ctx }/css/sesan-portal.css""text/css"22 
      23 
      script"text/javascript"src"${ctx }/js/jquery-1.7.2.min.js"></script24 
      25 
      style26 
      27 
     
      @H_403_69@#file_upload_return_img{width:1200px;margin:0 auto;} 
     
      28 
      29 
     
      @H_403_69@#file_upload_return_img img{float:left;width:300px;height:300px;} 
     
      30 
      31 
     
      @H_403_69@</style34 
      @H_403_69@$(document).ready(function(){ 
     
      32 
      33 
      35 
      "text/javascript"36 
      37 
     
      @H_403_69@//选择文件成功则提交表单 
     
      38 
      39 
     
      @H_403_69@$("#upload_file").change(function(){ 
     
      40 
      41 
     
      @H_403_69@if($("#upload_file").val() != '') $("#file_form").submit(); 
     
      42 
      43 
     
      @H_403_69@}); 
     
      44 
      45 
     
      @H_403_69@//iframe加载响应，初始页面时也有一次，此时data为null。 
     
      46 
      47 
     
      @H_403_69@$("#file_upload_return").load(function(){ 
     
      48 
      49 
     
      @H_403_69@var data = $(window.frames['file_upload_return'].document.body).find("font").html(); 
     
      50 
      51 
     
      @H_403_69@//若iframe携带返回数据，则显示在file_upload_return_img中 
     
      52 
      53 
     
      @H_403_69@if(data != null){ 
     
      54 
      55 
     
      @H_403_69@$("#file_upload_return_img").append(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>')); 
     
      56 
      57 
     
      @H_403_69@$("#upload_file").val(''); 
     
      58 
      59 
     
      @H_403_69@} 
     
      60 
      61 
     
      62 
      63 
      64 
      65 
      66 
      67 
      68 
      69 
      70 
      71 
      body72 
      73 
      formid"file_form"method"post"action"${ctx}/uploadImage/upload_util!uploadFile.do" 
     
      @H_403_69@target"file_upload_return"enctype"multipart/form-data"76 
     
      74 
      75 
      77 
      input"file"name"fileupload""upload_file"><!-- 添加上传文件 --> 
     
      78 
      79 
      form80 
      81 
      iframe"file_upload_return"iframe<!-- 提交表单处理iframe框架 --> 
     
      82 
      83 
      div"file_upload_return_img"div<!-- 响应返回数据容器 --> 
     
      @H_403_69@> 
     
      84 
      85 
      86 
      87

后台代码

后台具体怎么操作的不重要，关键是回写，当文件上传完毕之后后台调用回写向目标页面进行回写，便会造成 iframe 的重新刷新。下面就是回写代码。

out = response.getWriter();

out.print(“<font>文件上传成功</font>”);

转载自http://www.open-open.com/lib/view/open1358900666802.html

原文链接：https://www.f2er.com/ajax/164482.html

ajax异步提交含有文件的表单

猜你在找的Ajax相关文章