ajax文件异步提交的实现

最新推荐文章于 2024-07-18 11:48:33 发布

ptzrbin

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量547

点赞数

分类专栏： JQuery 文章标签： javascript 异步 ajax upload

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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 异步文件提交。

页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
 
       pageEncoding="UTF-8"%>
 
<%@ include file="/common/taglibs.jsp"%>
 
<%@ taglib prefix="sesan" uri="/sesan"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
       <title>ajax异步上传文件实现</title>
 
       
 
       <link type="text/css" rel="stylesheet" href="${ctx }/css/main.css"/>
 
       <link href="${ctx }/css/sesan-portal.css" rel="stylesheet" type="text/css" />
 
       <script type="text/javascript" src="${ctx }/js/jquery-1.7.2.min.js"></script>
 
       <style type="text/css">
 
     #file_upload_return{display:none;width:0;height:0;}
 
     #file_upload_return_img{width:1200px;margin:0 auto;}
 
     #file_upload_return_img img{float:left;width:300px;height:300px;}  
 
       </style>
 
       <script type="text/javascript">
 
       $(document).ready(function(){
 
            //选择文件成功则提交表单
 
            $("#upload_file").change(function(){
 
                if($("#upload_file").val() != '') $("#file_form").submit();
 
            });
 
            //iframe加载响应，初始页面时也有一次，此时data为null。
 
            $("#file_upload_return").load(function(){
 
                var data = $(window.frames['file_upload_return'].document.body).find("font").html();
 
                //若iframe携带返回数据，则显示在file_upload_return_img中
 
                if(data != null){
 
                    $("#file_upload_return_img").append(data.replace(/</g,'<').replace(/>/g,'>'));
 
                    $("#upload_file").val('');
 
                }
 
            });
 
        });
 
       </script>
 
</head>
 
<body>
 
 <form id="file_form" method="post" action="${ctx}/uploadImage/upload_util!uploadFile.do"
 
 target="file_upload_return" enctype="multipart/form-data">
 
     <input type="file" name="fileupload" id="upload_file">        <!-- 添加上传文件 -->
 
 </form>
 
 <iframe id="file_upload_return" name="file_upload_return"></iframe>    <!-- 提交表单处理iframe框架 -->
 
 <div id="file_upload_return_img"></div>    <!-- 响应返回数据容器 -->
 
</body>
 
</html>

后台代码

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

out = response.getWriter();

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

ptzrbin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax文件异步提交的实现

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

扫一扫