用JavaScript编写一个实用的文件批量上传组件,助力您的文件管理能力!

5 min read

可以使用HTML5的File API和FormData来实现批量上传文件。

HTML部分:

<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传</button>

JS部分:

function uploadFiles() {
  // 从文件输入元素获取所选文件
  var files = document.getElementById('fileInput').files;
  
  // 创建一个FormData对象,用于发送文件数据
  var formData = new FormData();
  
  // 向formData对象添加每个文件
  for (var i = 0; i < files.length; i++) {
    formData.append('files', files[i], files[i].name);
  }
  
  // 创建一个XmlHttpRequest对象,用于异步上传文件
  var xhr = new XMLHttpRequest();
  
  // 设置请求方式和URL
  xhr.open('POST', 'upload.php', true);
  
  // 发送文件数据
  xhr.send(formData);
}

在上面的代码中,我们首先获取了文件输入元素和所选文件。然后,我们创建了一个FormData对象,并使用append()方法向其中添加每个文件。最后,我们创建了一个XmlHttpRequest对象并使用send()方法将文件数据异步发送到服务器。

需要注意的是,在这个例子中,我们将所有选择的文件作为一个数组,命名为“files”来发送。因此,在服务器端上传文件时,需要注意接收的文件格式。