如何使用javascript上传文件？

Question

我想用js创建一个上传器。任何人都可以帮我如何使用JavaScript上传文件？

Answer 1

你可以像这样使用html5文件类型：

<input type="file" id="myFile">

你的文件将是有价值的：

var myUploadedFile = document.getElementById("myFile").files[0];

有关更多信息，请参阅https://www.w3schools.com/jsref/dom_obj_fileupload.asp

看看这里的例子：https://www.script-tutorials.com/pure-html5-file-upload/

Answer 2

您可以使用XMLHttpRequest和FormData上传文件。以下示例显示了如何上载新选择的文件。

<input type="file" name="my_files[]" multiple/>
<script>
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {

  const fd = new FormData();

  // add all selected files
  e.target.files.forEach((file) => {
    fd.append(e.target.name, file, file.name);  
  });

  // create the request
  const xhr = new XMLHttpRequest();
  xhr.onload = () => {
    if (xhr.status >= 200 && xhr.status < 300) {
        // we done!
    }
  };

  // path to server would be where you'd normally post the form to
  xhr.open('POST', '/path/to/server', true);
  xhr.send(fd);
});
</script>

免责声明，我是FilePond的作者，这与上传的方式非常相似。