javascript - 上传 pdf/doc 等并根据请求将数据发送到服务器 - Javascript

Question

我需要上传 pdf、excelsheets、doc。等格式到服务器 - 使用简单的 Javascript 请求文件中的数据。我正在考虑使用 Blob 、字节流......这可能吗？有人可以解释一下吗？

Answer 1

使用普通 Javascript，您可以创建 XMLHTTPRequest对象并将文件发送到您选择的任何端点。

在执行此操作时需要考虑的一些问题:

• 您想要仅上传该文件还是需要上传任何与之相关的数据？
• 我需要支持多个文件吗？如果是这样，您可以使用 FormData如果您有一个设置了 multiple 属性的 HTML5 input 表单，则该对象(它是定义的键值对类型)用于保存多个文件。 Make sure your project allows support for it .
• 您使用什么服务器/框架？你如何访问这个？ request 对象？类似的东西吗？
• 您希望/需要如何为 html 文件输入创建一个选择器以便与 Javascript 一起使用？我将在下面提供一个使用 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
    }
}