上傳PDF/DOC等，並在請求發送數據到服務器 - 的Javascript

Question

我需要上傳PDF，excelsheets，DOC。 etc格式到服務器 - 請求文件中的數據使用簡單的Javascript。 我正在考慮做Blob，字節流..是否有可能。 有人可以解釋嗎？

Answer 1

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

• 您是否希望上傳只是文件或你需要用它上傳任何相關的數據：

  有些問題，當你正在努力這樣做的考慮？

• 我需要支持多個文件嗎？如果是這樣，你可以使用FormData對象（這是一個定義的鍵值對類型）打開多個文件，如果你有一個HTML5 input形式與multiple屬性設置。 Make sure your project allows support for it。
• 你在使用什麼服務器/框架？你如何訪問這個？ A request對象？相似的東西？
• 你怎麼想/需要用於與JavaScript中使用的HTML文件輸入創建一個選擇？我將提供一個使用下面的id的html屬性的例子。
• 你需要支持CORS？實質上，您是否向同一臺服務器或遠程服務器發送請求？如果遠程，您需要在服務器中使用configure 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 
    } 
}