上传文件 Javascript MDN - Javascript

Javascript提供了多种上传文件的方式，包括通过表单上传文件和使用Ajax上传文件。本文将介绍这两种方式的实现方法。

通过表单上传文件

HTML代码

<form enctype="multipart/form-data" method="post" action="fileUpload.php">
  <input type="file" name="file" />
  <input type="submit" value="上传" />
</form>

Javascript代码

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var input = document.querySelector('input[type="file"]');

  var formData = new FormData();
  formData.append('file', input.files[0]);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/fileUpload.php', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
});

以上代码通过监听表单的submit事件，阻止默认行为，获取file input元素的值，并将其封装到FormData对象中。然后创建XMLHttpRequest对象，打开POST请求，并发送表单数据。

使用Ajax上传文件

HTML代码

<input type="file" id="fileInput" />

<button id="uploadButton">上传</button>

Javascript代码

var input = document.querySelector('#fileInput');
var button = document.querySelector('#uploadButton');

button.addEventListener('click', function(event) {
  var files = input.files;

  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    formData.append('file[]', file);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/fileUpload.php', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
});

以上代码通过监听按钮的click事件，获取file input元素的值，并将其封装到FormData对象中。然后创建XMLHttpRequest对象，打开POST请求，并发送表单数据。

结语

以上就是Javascript上传文件的两种方式的实现方法，分别使用了表单和Ajax。这两种方式都很常见，但具体的实现方法可能有所不同。在实际应用中，需要根据具体情况进行调整。