上載pdf / doc等，並根據請求將數據發送到服務器-Javascript

Question

我需要上傳pdf，excelsheets，doc。 等格式到服務器-使用簡單的Javascript將請求文件中的數據。 我當時想和Blob一起做，字節流..是否可能。 有人可以解釋嗎？

Answer 1

使用香草Javascript，您可以創建XMLHTTPRequest對象，並將文件發送到您選擇的任何端點。

在執行此操作時要考慮的一些問題：

• 您是要僅上傳文件，還是需要上傳任何相關數據？
• 我需要支持多個文件嗎？ 如果這樣，則可以使用FormData對象（它是已定義的鍵值對類型）來保存多個文件（如果您具有設置了multiple屬性的HTML5 input表單）。 確保您的項目允許它的支持 。
• 您正在使用什么服務器/框架？ 您如何訪問此內容？ 一個request對象？ 相似的東西？
• 您如何/需要為HTML文件輸入創建選擇器以與Javascript一起使用？ 我將在下面提供一個使用id的html屬性的示例。
• 您需要支持CORS嗎？ 本質上，您是將請求發送到同一服務器還是遠程服務器？ 如果是遠程的，則需要在服務器中配置CORS 。

允許多個文件支持的文件輸入

<input type='file' id='multiple-file-input' multiple>

javascript示例

// idElementForFiles - id of the <input type="file" multiple>
// endpoint - URL to send your request to

var idElementForFiles = 'multiple-file-input';
var endpoint = '/path_to_server/request';

var formdata = new FormData();     // Create FormData
var uploadedFiles = document.getElementById(idElementForFiles); // set our uploadedFiles variable

// Iterate through each file in uploadedFiles
for (i = 0; i < uploadedFiles.files.length; i++) {

    // Appending each file to FormData object
    // sending to 'endpoint' as an array of {'name_of_file': 'binary_file_data'}
    formdata.append(uploadedFiles.files[i].name, uploadedFiles.files[i]);

}
// create new Ajax call and send
var xhr = new XMLHttpRequest();
xhr.open('POST', endpoint);
xhr.send(formdata);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr); // log response object
    }
}