ajax文件異步提交的實現
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>”);
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！