文件上傳,iframe跨域數(shù)據(jù)提交的實現(xiàn)
1、文件上傳，圖片上傳，第三方uploadify插件，http://www.uploadify.com/about/
2、用iframe上傳文件，提交表單，主要思路就是：
a、js創(chuàng)建form表單，iframe，添加到body里，form的target要和iframe的name一致。
b、form表單里更新數(shù)據(jù)，submit提交
c、如果上傳文件，圖片，form里面添加 input-file 元素，綁定onchange事件，js觸發(fā)，在onchange里面添加submit事件
d、關(guān)于回調(diào)：iframe提交成功后，返回的數(shù)據(jù)在iframe子頁面的里面，可以這樣獲取，需要拆分：
$iframe[0].contentWindow.document.querySelector('body').innerHTML
代碼片：
var target = 'frameFile';
var input = '<input type="file" name="file" onchange="changeImage()">' +
'<input name="appId" value="'+id+'">' +
'<input type="submit" name="submit" value="submit">';
var $form = $('<form action="'+ url +'" target="'+ target +'" enctype="multipart/form-data" method="post" id="upImageForm" style="display:none">'+input+'</form>').appendTo('body');
var $iframe = $('<iframe name="'+ target +'" style="display:none"></iframe>').appendTo('body');
$form.find('input').eq(0).click();
window.changeImage = function(){
$form.find('input').eq(-1).click();
};
//檢測iframe頁面load
$iframe.load(function(e){
var str = $iframe[0].contentWindow.document.querySelector('body').innerHTML;
var data = spt(str);
$form.remove();
$iframe.remove();
callback(data);
});
function spt(str){
//字符串拆成對象
var a = str.indexOf('{');
var b = str.indexOf('}');
var j = {};
var t = [];
var s = str.substring(a+1,b);
s = s.replace(/"/gi,'');
t = s.split(',');
for(var i=0; i<t.length; i++ ){
var tmp = t[i].split(':');
j[tmp[0]] = tmp[1];
};
return j;
};
2-c修正，以上代碼有bug：
手動觸發(fā)input-file的onchange事件，在事件里面submit，這做法有問題。因為觸發(fā)onchange事件，選擇才開始，submit就已經(jīng)提交了。
上傳功能，form表單元素只能放到html里。
以上這篇文件上傳,iframe跨域數(shù)據(jù)提交的實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單可拖動的模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在javascritp中，有兩個關(guān)于定時器的專用函數(shù)2013-04-04
js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
現(xiàn)在大多數(shù)網(wǎng)站都會添加這種功能：當(dāng)滾動條滾動到頁面的下方時，頁面的右下角會顯示出來一個“回到頂部”的按鈕或連接;那么，如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實現(xiàn)方法，感興趣的你可不要走開哦2013-01-01
JavaScript使用HTML5的window.postMessage實現(xiàn)跨域通信例子
這篇文章主要介紹了JavaScript使用HTML5的window.postMessage實現(xiàn)跨域通信例子,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)pc端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
echarts同一頁面中四個圖表切換的js數(shù)據(jù)交互方法示例
這篇文章主要給大家介紹了關(guān)于echarts同一頁面中四個圖表切換的js數(shù)據(jù)交互的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的幫助，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)保存影集和圖片到相冊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
原生JS+HTML5實現(xiàn)的可調(diào)節(jié)寫字板功能示例
這篇文章主要介紹了原生JS+HTML5實現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動態(tài)操作頁面元素實現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下2018-08-08
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實現(xiàn)
Hash Map通常在JavaScript中作為一個簡單的來存儲鍵值對的地方,不過哈希對象Object并不是一個真正的哈希映射,沒Java中的Hash Map來的那么強(qiáng)大,well,接下來帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實現(xiàn)2016-05-05