文件上傳,iframe跨域數(shù)據(jù)提交的實(shí)現(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){
//字符串拆成對(duì)象
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：
手動(dòng)觸發(fā)input-file的onchange事件，在事件里面submit，這做法有問題。因?yàn)橛|發(fā)onchange事件，選擇才開始，submit就已經(jīng)提交了。
上傳功能，form表單元素只能放到html里。
以上這篇文件上傳,iframe跨域數(shù)據(jù)提交的實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解
這篇文章主要介紹了HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
JS簡單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法
這篇文章主要介紹了JS簡單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
ListBox實(shí)現(xiàn)上移,下移,左移,右移的簡單實(shí)例
這篇文章主要介紹了ListBox實(shí)現(xiàn)上移,下移,左移,右移的簡單實(shí)例。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
利用JS、CSS實(shí)現(xiàn)列表自動(dòng)滑動(dòng)滾動(dòng)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于利用JS、CSS實(shí)現(xiàn)列表自動(dòng)滑動(dòng)滾動(dòng)效果的相關(guān)資料,本人在項(xiàng)目中遇到這樣的需求,親自來做的,通過html頁面配合js,css來做出的列表自動(dòng)滑動(dòng),需要的朋友可以參考下2024-07-07
本文介紹一個(gè)簡單可行的辦法，來做基于gulp構(gòu)建的中小型項(xiàng)目中的seajs合并壓縮，感興趣的朋友一起看看詳情吧2016-06-06
bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能示例
這篇文章主要介紹了bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了bootstrap+jQuery實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
基于JS實(shí)現(xiàn)父組件的請(qǐng)求服務(wù)過程解析
這篇文章主要介紹了基于JS實(shí)現(xiàn)父組件的請(qǐng)求服務(wù)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
javascript的加法結(jié)果會(huì)有誤差，在兩個(gè)浮點(diǎn)數(shù)相加的時(shí)候會(huì)比較明顯。這個(gè)函數(shù)返回較為精確的加法結(jié)果，下面為大家介紹下js如何對(duì)小數(shù)加法精度處理2013-12-12
基于layui table返回的值的多級(jí)嵌套的解決方法
今天小編就為大家分享一篇基于layui table返回的值的多級(jí)嵌套的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
大家平時(shí)在開發(fā)的時(shí)候有沒被new?Date()折磨過，反正我是踩過很多坑，今天小編通過本文給大家詳細(xì)講解下new?date()方法應(yīng)用思考，感興趣的朋友一起看看吧2023-04-04