Question

我有一个动态生成的文件，我需要上传到S3服务器。

如果我使用HTML输入文件框来选择文件，它可以正常工作。

var file = $('#file-chooser')[0].files[0];

但是当我在变量中传递文件的路径时，它无法正常工作。我错过了什么。

 var filename = "file:///http://localhost:7443/somepath/somefile.mp3";

缺少什么。

Answer 1

将文件上传到服务器 首先，您需要创建三个变量来保存对HTML标记中<form>, <input>,和<button>元素的引用。

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();

  // Update button text.
  uploadButton.innerHTML = 'Uploading...';

  // The rest of the code will go here...
}

在事件监听器中，您首先在传递给处理程序的事件对象上调用preventDefault（）。这将阻止浏览器提交表单，允许我们使用AJAX处理文件上传。

接下来，将uploadButton上的innerHTML属性更新为Uploading ....这只是向用户提供一些反馈，以便他们知道文件正在上传。

您的下一个工作是从元素中检索FileList并将其存储在变量中。您可以通过访问files属性来执行此操作。

// Get the selected files from the input.
var files = fileSelect.files;

然后创建一个新的FormData对象。这用于构造形成AJAX请求的数据有效负载的键/值对。

// Create a new FormData object.
var formData = new FormData();

您的下一个工作是遍历文件数组中的每个文件，并将它们添加到刚刚创建的formData对象中。您还需要检查用户是否选择了您期望的文件类型。

// Loop through each of the selected files.
for (var i = 0; i < files.length; i++) {
  var file = files[i];

  // Check the file type.
  if (!file.type.match('image.*')) {
    continue;
  }

  // Add the file to the request.
  formData.append('photos[]', file, file.name);
}

这里，您首先从files数组中获取当前文件，然后检查以确保它是图像。文件的type属性将以字符串形式返回文件类型。因此，您可以使用JavaScript match（）方法来确保此字符串与所需类型匹配。如果文件类型不匹配，则通过调用continue来跳过该文件。

然后使用formData对象上的append方法将此文件添加到数据有效内容中。

文件打开以上传到服务器

1 个答案: