iframe無刷新跨域上傳文件並得到返回值

原文：http://geeksun.iteye.com/blog/1070607

需求：從S平臺上傳文件到R平臺，上傳成功後R平臺返回給S平臺一個值，S平臺是在一個頁面彈出的浮窗裏上傳文件，因此不能用直接用向R平臺submit的方式提交，換用一種類AJAX方式實現，此處用了target的方式，是一種僞AJAX.

提交頁面代碼：

<form name="form_add" method="post" action="b.action"  enctype="multipart/form-data" target="hidden_frame">
<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
</form>
<script type="text/javascript">
function callback(msg){
    if(msg == 0){
        parent.$.nyroModalRemove();
    }
}
</script>

 form提交到的target的hidden_frame，這樣看不出來頁面跳轉，callback爲一個回調函數，接受上傳action傳回的值，根據傳回值執行相應的操做。

處理上傳文件的action代碼：

 

response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        response.setHeader("Cache-Control", "no-cache");
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.addHeader("Location", callUrl + "?msg=" + result);

        response.sendRedirect(callUrl + "?msg=" + result);

 callUrl爲文件上傳時提交的反調的callUrl，msg爲回傳的參數。

 callUrl爲S平臺的deal_callback.html，和上傳的頁面在同一目標下，頁面代碼爲：

 

<script type="text/javascript">
    var rs = window.location.search.split('?').slice(1);
    window.parent.callback(rs.toString().split('=').slice(1));
</script>

 deal_callback.html是response跳轉到的頁面，裏面就兩行代碼，跳轉到deal_callback.html後，此頁面調用上傳頁面的callback方法，將返回值傳遞過去，完成返回值的傳遞。