主頁 > 知識(shí)庫 > 詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)

詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)

熱門標(biāo)簽:ai機(jī)器人電銷資源 越南河內(nèi)地圖標(biāo)注 超級(jí)大富翁地圖標(biāo)注 個(gè)人怎樣在百度地圖標(biāo)注地名 云呼外撥網(wǎng)絡(luò)電話系統(tǒng) 地圖標(biāo)注項(xiàng)目怎么樣 騰訊地圖標(biāo)注位置能用多久 機(jī)器人電銷騙局揭秘 硅語電話機(jī)器人公司

自從有html5之后,文件上傳變的非常簡單。很方便的解決了項(xiàng)目中需要用到的文件上傳功能。HTML5支持多圖片上傳,而且支持ajax上傳,而且支持上傳之前圖片的預(yù)覽,而且支持圖片拖拽上傳,而且還是純粹利用file控件實(shí)現(xiàn),JS代碼寥寥,想不讓人稱贊都難??!

HTML5Ajax上傳

html5的上傳實(shí)現(xiàn),是需要file控件以及XMLHttpRequest請(qǐng)求。下面是我封裝的一個(gè)上傳插件:

function fileUpload(options) {
var opts = options || {};
var func = function() {};
this.fileInput = opts.fileInput || null;
this.url = opts.url || '';
this.fileList = [];
this.onFilter = opts.onFilter || function(f) {return f;}; //選擇文件組的過濾方法
this.onSelect = opts.onSelect || func; //文件選擇后
this.onProgress = opts.onProgress || func; //文件上傳進(jìn)度
this.onSuccess = opts.onSuccess || func; //文件上傳成功時(shí)
this.onFailure = opts.onFailure || func; //文件上傳失敗時(shí);
this.onComplete = opts.onComplete || func; //文件全部上傳完畢時(shí)
this.init();
}
fileUpload.prototype = {
dealFiles: function(e) { //獲取要上傳的文件數(shù)組(用戶選擇文件后執(zhí)行)
var files = e.target.files || e.dataTransfer.files;
this.fileList = this.onFilter(files);
for(var i = 0, file; file = this.fileList[i]; i++){ //增加唯一索引值
file.index = i;
}
this.onSelect(this.fileList);
return this;
},
removeFile: function(fileDelete) { //刪除某一個(gè)文件
var arrFile = [];
for(var i = 0, file; file = this.fileList[i]; i++){
if (file != fileDelete) {
arrFile.push(file);
}
}
this.fileList = arrFile;
return this;
},
removeAll: function() { //清空文件隊(duì)列
this.fileList = [];
return this;
},
uploadFile: function() { //上傳文件
var me = this;
for(var i = 0, file; file = this.fileList[i]; i++){
(function(file) {
var formData = new FormData();
var xhr = new XMLHttpRequest();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function(e) { // 上傳中
me.onProgress(file, e.loaded, e.total);
}, false);
xhr.onreadystatechange = function(e) { // 文件上傳成功或是失敗
if (xhr.readyState == 4) {
if (xhr.status == 200) {
me.onSuccess(file, xhr.responseText);
me.removeFile(file);
if (!me.fileList.length) {
me.onComplete(); //上傳全部完畢。執(zhí)行回調(diào)
}
} else {
me.onFailure(file, xhr.responseText);
}
}
};
// 開始上傳
formData.append('file', file);
xhr.open("POST", me.url, true);
xhr.send(formData);
}
})(file);
}
},
init: function() {
var me = this;
//文件選擇控件選擇
if (me.fileInput) {
me.fileInput.addEventListener("change", function(e) { me.dealFiles(e); }, false);
}
}
}; 

相信大家也看到了,代碼中出現(xiàn)了formData,這就是html5的神奇之處了。借助formData輕松實(shí)現(xiàn)異步無刷新支持預(yù)覽圖片的多文件上傳功能。而且,令人欣慰的是,現(xiàn)在已經(jīng)有很多瀏覽器都已經(jīng)支持html5了。

但是?。?!ie9以下的版本不支持呀!!

除此之外,上面的方法還有一個(gè)弊端,因?yàn)槭褂昧薬jax的上傳方式,所以不能支持跨域上傳,如果必須要滿足這兩個(gè)業(yè)務(wù)場景,那就試試下面的方法吧,借助form和iframe來實(shí)現(xiàn)上傳。下面來詳細(xì)看一下:

form表單提交到iframe

html代碼:

iframe name="demoIframe" style="display:none">/iframe>
form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">
input class="filename" type="file" name="fileLabel">
input type="submit" value="提交">
/form> 

我們點(diǎn)擊提交,可以看到下面的請(qǐng)求:

已經(jīng)把文件上傳。那么,加入這個(gè)upload.php接口可用,而且假如上傳成功后,會(huì)返回:

{
"code": "200",
"success": true,
"data": {
...
}
} 

我們要怎么去獲取返回值,從而進(jìn)行下一步的操作呢?因?yàn)槲覀兪巧蟼鞯搅薸frame中,所以我們只需要監(jiān)聽iframe的load事件,如果有返回值了,我們就能獲取到,從而進(jìn)行進(jìn)一步處理。看js代碼:

$('iframe').on('load', function() {
var responseText = $('iframe')[0].contentDocument.body.textContent;
var responseData = JSON.parse(responseText) || {};
if (responseData.isSuccess == true || responseData.code == 200) {
//success
} else {
//error 
}
});

這樣我們就完成了一個(gè)支持所有瀏覽器的上傳文件操作了。在此小編非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

您可能感興趣的文章:
  • ajax(iframe)無刷新提交表單、上傳文件
  • Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
  • js動(dòng)態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實(shí)現(xiàn)無刷新
  • iframe實(shí)現(xiàn)Ajax文件上傳效果示例
  • 原生ajax和iframe框架實(shí)現(xiàn)圖片文件上傳的兩種方式
  • PHP實(shí)現(xiàn)帶進(jìn)度條的Ajax文件上傳功能示例
  • PHP使用HTML5 FileApi實(shí)現(xiàn)Ajax上傳文件功能示例
  • php+ajax 文件上傳代碼實(shí)例
  • PHP+Ajax實(shí)現(xiàn)上傳文件進(jìn)度條動(dòng)態(tài)顯示進(jìn)度功能
  • PHP+iframe模擬Ajax上傳文件功能示例

標(biāo)簽:洛陽 內(nèi)蒙古 鄭州 舟山 邢臺(tái) 林芝 遼源 海南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)》,本文關(guān)鍵詞  詳解,Ajax,和,form+iframe,實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)》相關(guān)的同類信息!
  • 本頁收集關(guān)于詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章