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)文章

JS實(shí)現(xiàn)簡單可拖動(dòng)的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單可拖動(dòng)的模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS定時(shí)器實(shí)例
在javascritp中，有兩個(gè)關(guān)于定時(shí)器的專用函數(shù)
2013-04-04
js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
現(xiàn)在大多數(shù)網(wǎng)站都會(huì)添加這種功能：當(dāng)滾動(dòng)條滾動(dòng)到頁面的下方時(shí)，頁面的右下角會(huì)顯示出來一個(gè)“回到頂部”的按鈕或連接;那么，如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實(shí)現(xiàn)方法，感興趣的你可不要走開哦
2013-01-01
JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子
這篇文章主要介紹了JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子,需要的朋友可以參考下
2014-04-04
原生JS實(shí)現(xiàn)pc端輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)pc端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
這篇文章主要給大家介紹了關(guān)于echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的幫助，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
微信小程序?qū)崿F(xiàn)保存影集和圖片到相冊(cè)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)保存影集和圖片到相冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能示例
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下
2018-08-08
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
Hash Map通常在JavaScript中作為一個(gè)簡單的來存儲(chǔ)鍵值對(duì)的地方,不過哈希對(duì)象Object并不是一個(gè)真正的哈希映射,沒Java中的Hash Map來的那么強(qiáng)大,well,接下來帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
2016-05-05