詳解Ajax和form+iframe 實(shí)現(xiàn)文件上傳的方法(兩種方式)
自從有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了。
但是?。。e9以下的版本不支持呀??!
除此之外,上面的方法還有一個(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)一步處理??磈s代碼:
$('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上傳文件功能示例
相關(guān)文章
ajax請(qǐng)求json數(shù)據(jù)案例詳解
最近項(xiàng)目有這樣一個(gè)需求,點(diǎn)擊六大洲,出現(xiàn)對(duì)應(yīng)的一些請(qǐng)求信息,展示在下面,當(dāng)請(qǐng)求之后,第二次點(diǎn)擊就不用再次請(qǐng)求了,究竟用代碼怎么寫呢,下面小編帶領(lǐng)大家了解了解2015-09-09Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理圖文詳解
最近在項(xiàng)目中遇到一個(gè)問題,當(dāng)加載數(shù)據(jù)量特別大的時(shí)候會(huì)出現(xiàn)加載超時(shí)現(xiàn)象,所以這篇文章主要給大家介紹了關(guān)于Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理的相關(guān)資料,需要的朋友可以參考下2021-05-05herf=#導(dǎo)致Ajax請(qǐng)求時(shí)沒有向后臺(tái)發(fā)送數(shù)據(jù)
當(dāng)點(diǎn)擊重命名進(jìn)行Ajax請(qǐng)求時(shí),并沒有向后臺(tái)發(fā)送數(shù)據(jù)而是直接跳轉(zhuǎn)到了首頁,后來發(fā)現(xiàn)是這個(gè)herf=#惹的禍2014-05-05ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02DELETE 請(qǐng)求如何通過ajax進(jìn)行發(fā)送(方法小結(jié))
DELETE 請(qǐng)求用于向服務(wù)器發(fā)送刪除資源的請(qǐng)求,它是 RESTful API 中的一個(gè)重要方法,用于刪除指定的資源,本文給大家介紹DELETE 請(qǐng)求如何通過ajax進(jìn)行發(fā)送,感興趣的朋友一起看看吧2023-11-11