上载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
    }
}