資訊專欄INFORMATION COLUMN
摘要：我們將教你一個請求上傳多文件的例子。然而，你可以用同樣的辦法上傳單個文件。在功能方面的進(jìn)步，消除供開發(fā)者使用第三方瀏覽器插件來處理文件上傳的需要。
AJAX的采用標(biāo)志著的Web歷史上的一個巨大飛躍。與Web服務(wù)器通信而不需要重新加載頁面的能力已改變了Web應(yīng)用程序構(gòu)建。動態(tài)網(wǎng)站的概念形成以后，AJAX(XMLHttpRequests) 技術(shù)發(fā)展迅速。
近年來XMLHttpRequests增加了一個很好的功能來處理文件上傳。傳統(tǒng)上，許多開發(fā)者用其他技術(shù)如Flash上傳文件到服務(wù)器。這種方法的問題是，用戶需要安裝第三方瀏覽器插件的。
在這篇文章中你會學(xué)到如何用JavaScript技術(shù)將文件上傳到服務(wù)器。我們將教你一個請求上傳多文件的例子。然而，你可以用同樣的辦法上傳單個文件。
讓我們開始吧！
你需要做的第一件事就是建立你的HTML表單讓用戶選擇文件。讓事情簡單，我們用標(biāo)準(zhǔn)的元素并設(shè)為file類型。
請注意，元素有個multiple屬性。這將允許用戶通過瀏覽器文件選擇器選擇多個文件。如果你不指定此屬性的用戶只能選擇一個文件。
現(xiàn)在你的HTML表格建好了，我們再看看處理文件上傳的JavaScript代碼。
首先你需要創(chuàng)建三個變量來獲取HTML里的，，元素。
var form = document.getElementById("file-form");
var fileSelect = document.getElementById("file-select");
var uploadButton = document.getElementById("upload-button");
下一步你需要綁定一個事件監(jiān)聽器到表單的onsubmit事件。
form.onsubmit = function(event) {
event.preventDefault();
// 更新按鈕里的文字
uploadButton.innerHTML = "Uploading...";
// 其余的代碼將在這里...
}
在事件監(jiān)聽器里，首先調(diào)用event對象的preventDefault()。這將阻止瀏覽器提交的表單，使我們能夠繼續(xù)處理Ajax文件上傳。
下一步，更新的uploadButton的innerHTML屬性為Uploading...，這告訴用戶文件上傳中。
接下來，從元素中獲取[FileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)內(nèi)容并存儲到變量里。你可以通過訪問files屬性來做到這點(diǎn)。
// 獲取選擇的文件 var files = fileSelect.files;
然后創(chuàng)建一個新的[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)對象。這是用來接收Ajax請求獲取的鍵/值對數(shù)據(jù)。
// 創(chuàng)建一個FormData對象 var formData = new FormData();
然后，通過循環(huán)獲取files數(shù)組的每一個文件內(nèi)容，并將它們添加到你剛才創(chuàng)建的formData對象里。你也許還想檢查用戶選的文件是否是你規(guī)定的文件類型。
// 對每個文件進(jìn)行循環(huán)處理
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 檢查文件類型
if (!file.type.match("image.*")) {
continue;
}
// 添加文件到formData
formData.append("photos[]", file, file.name);
}
在這里，你先讀取當(dāng)files數(shù)組里的所有文件，然后檢查以確保它是圖像。該文件的type屬性將返回一個字符串的文件類型。你可以使用JavaScript的 match()方法來確保這個字符串匹配所需的類型。如果文件類型不匹配，通過調(diào)用continue跳過后面的語句結(jié)束本輪循環(huán)。
然后使用append()方法把文件添加到formData對象里。
注：
FormData.append()方法用于處理Files，Blobs，或Strings。
// Files formData.append(name, file, filename); // Blobs formData.append(name, blob, filename); // Strings formData.append(name, value);
第一個參數(shù)指定數(shù)據(jù)項(xiàng)的name。這將形成數(shù)據(jù)的key。第二個參數(shù)指定一個File、 Blob或者 String作為數(shù)據(jù)數(shù)據(jù)的value。當(dāng)添加一個File或 Blob，可以指定一個filename文件名，但這不是必需的。
下一步你需要設(shè)置XMLHttpRequest與服務(wù)器通信。你首先需要創(chuàng)建一個新的XMLHttpRequest對象。
// 設(shè)置請求。 var xhr = new XMLHttpRequest();
現(xiàn)在您需要創(chuàng)建一個新連接到服務(wù)器。你使用open方法。該方法帶三個參數(shù)。HTTP的請求方式、url和一個布爾值(確定是否應(yīng)處理異步請求)。
// 打開連接。
xhr.open("POST", "handler.php", true);
下一步你需要建立一個事件偵聽器，onLoad事件完成后就會觸發(fā)時。xhr對象的status屬性會告訴你請求是否成功完成。
// 請求完成時建立一個處理程序。
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
uploadButton.innerHTML = "Upload";
} else {
alert("An error occurred!");
}
};
剩下要做的是發(fā)送請求。用xhr的send方法發(fā)送formData。
// 發(fā)送數(shù)據(jù)。 xhr.send(formData);
這就是開始使用Ajax文件上傳的內(nèi)容。您的服務(wù)器端代碼需要提取文件并處理。
瀏覽器的支持瀏覽器支持總體上是好的。Internet Explorer是唯一的例外。IE 10及以上的版本支持，但早期版本的IE不支持本文提到的一些XMLHttpRequest功能。
| IE | FIREFOX | CHROME | SAFARI | OPERA |
|---|---|---|---|---|
| 10.0+ | 4.0+ | 7.0+ | 5+ | 12+ |
在這篇文章中你學(xué)到了如何上傳文件使用本地JavaScript技術(shù)，Web服務(wù)器。在功能方面的進(jìn)步，消除XMLHttpRequests供開發(fā)者使用第三方瀏覽器插件來處理文件上傳的需要。這是很好的為本地的瀏覽器功能往往是更快和更比一個插件提供的安全。
你計劃在你的項(xiàng)目中使用Ajax上傳的文件？請在下面的評論中分享你的想法。
英文原文
本文地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87663.html
摘要：比起普通的，使用的最大優(yōu)點(diǎn)就是我們可以異步上傳一個二進(jìn)制文件。方法二一次性上傳多個文件如果后臺接口要求單個文件，就循環(huán)獲取文件信息提交，使用同步上傳。 歡迎交換友鏈 Lakers Blog--進(jìn)擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker showImg(https://segmentfault.com/img/bVtcT...
摘要：方案一表單上傳該方案優(yōu)點(diǎn)是支持好，缺點(diǎn)刷新頁面。提交原理就是上傳文件的重點(diǎn)。當(dāng)使用有文件上傳控件的表單時，該值是必需的將空格轉(zhuǎn)換為符號，但不編碼特殊字符方案二表單上傳優(yōu)化方案一缺點(diǎn)該方案的優(yōu)點(diǎn)也是支持好，缺點(diǎn)是不支持跨域。 書寫是為了更好的記憶。 方案一：form表單上傳 該方案優(yōu)點(diǎn)是支持好，缺點(diǎn)刷新頁面。 原理：enctype就是form上傳文件的重點(diǎn)。 值 描...
摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用能夠無刷新上傳圖片等文件。 我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用ajax來解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會導(dǎo)致提交成功后頁面跳轉(zhuǎn)，而使用ajax能夠無刷新上傳圖片等文件。其實(shí)已經(jīng)有朋友封裝了...
閱讀 1248·2021-11-24 09:39
閱讀 390·2019-08-30 14:12
閱讀 2604·2019-08-30 13:10
閱讀 2447·2019-08-30 12:44
閱讀 972·2019-08-29 16:31
閱讀 857·2019-08-29 13:10
閱讀 2454·2019-08-27 10:57
閱讀 3164·2019-08-26 13:57
