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