从 URL 上传文件 JavaScript

在 Web 应用程序中，上传文件是一个非常常见的需求之一。有时候，我们需要从网络中提取文件然后在我们的应用程序中使用。JavaScript 提供了一种简单的方法来完成这个任务：通过 URL 上传文件。

使用 XMLHttpRequest 上传文件

XMLHttpRequest 对象是 JavaScript 用于发送 AJAX 请求的常见方式。但是，它也可以用于从 URL 上传文件。以下是一个简单的例子，演示了如何使用 XMLHttpRequest 对象：

function uploadFileFromUrl(url, filename, mimeType) {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if (req.readyState == 4 && req.status == 200) {
      console.log("File uploaded successfully!");
    }
  };
  req.open("GET", url, true);
  req.responseType = "blob";
  req.onload = function() {
    var blob = req.response;
    var formData = new FormData();
    formData.append("file", blob, filename);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "<upload url>", true);
    xhr.onload = function() {
      console.log("File uploaded successfully!");
    };
    xhr.send(formData);
  };
  req.send();
}

在上面的代码中，我们首先使用 XMLHttpRequest 对象从 URL 中获取文件的二进制数据。一旦我们获取到了二进制数据，就可以使用 FormData 对象来构建一个包含文件信息的表单数据。

在构建 FormData 对象时，我们使用 append() 方法将文件添加到表单中。我们需要为该方法传入三个参数：

• 第一个参数是表单控件的名称。在这里，我们使用了 file。
• 第二个参数是一个 Blob 对象，它包含了我们从 URL 中获取的文件的二进制数据。
• 第三个参数是文件的名称。在这里，我们使用了 filename。

最后，我们使用另一个 XMLHttpRequest 对象将表单数据发送到我们的服务器。

结论

在本文中，我们介绍了如何使用 JavaScript 从 URL 中上传文件。虽然这个过程可能看起来有点复杂，但在实践中却非常有用。如果你需要从网络中提取文件并将它们上传到你的服务器，这个功能将非常有用。