基于javascript html5实现多文件上传

关于“基于JavaScript HTML5实现多文件上传”的攻略，需要考虑以下几个方面：

1. HTML5多文件上传原理
2. JavaScript实现HTML5多文件上传的步骤
3. 两个示例

HTML5多文件上传原理

HTML5提供了file对象和FormData对象，可以方便地实现文件上传功能。其中，file对象用于选择上传的文件，FormData对象用于将文件数据提交给服务器。在使用HTML5实现多文件上传功能时，需要使用JavaScript实现以下步骤：

JavaScript实现HTML5多文件上传的步骤

1. 定义上传表单和文件选择器。使用<input>标签创建文件选择器，使用<form>标签创建上传表单，设置表单的enctype属性为“multipart/form-data”。

<form enctype="multipart/form-data">
<input type="file" name="file" multiple>
<button type="submit">上传</button>
</form>

1. 定义上传函数。在用户点击上传按钮之后，使用JavaScript实现上传函数，将选择的文件按照FormData格式提交给服务器。

function uploadFile() {
      var formData = new FormData();
      var fileInput = document.querySelector('input[type="file"]');
      for (var i = 0; i < fileInput.files.length; i++) {
        formData.append('fileList', fileInput.files[i]);
      }
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'upload.php', true);
      xhr.send(formData);
    }

1. 对后台进行处理。在服务器上接收文件上传请求，对文件进行解析、验证和存储。根据业务需求，对上传结果进行反馈。

示例：

示例1：HTML5文件上传到NodeJS服务器

前端代码：

<form enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="button" onclick="uploadFile()">上传</button>
</form>

JavaScript代码：

function uploadFile() {
  var formData = new FormData();
  var fileInput = document.querySelector('input[type="file"]');
  for (var i = 0; i < fileInput.files.length; i++) {
    formData.append('fileList', fileInput.files[i]);
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
}

NodeJS代码：

// 引入http、fs和formidable模块
const http = require('http');
const fs = require('fs');
const formidable = require('formidable');
// 创建服务器
http.createServer(function(req, res) {
  if(req.method === 'POST') {
    // 创建formidable表单对象
    const form = new formidable.IncomingForm();
    // 设置文件上传路径
    form.uploadDir = './upload';
    // 保留文件后缀名
    form.keepExtensions = true;
    // 解析上传的文件
    form.parse(req, function(err, fields, files) {
      if(err) {
        console.log(err);
        return;
      }
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload: \n\n');
      // 遍历所有上传的文件
      for(var i = 0; i < files.fileList.length; i++) {
        var file = files.fileList[i];
        // 重命名文件
        fs.renameSync(file.path, './upload/' + file.name);
        res.write('uploaded: ' + file.name + '\n');
      }
      res.end();
    });
    return;
  }
}).listen(8080);

示例2：在React中使用HTML5文件上传

前端代码：

<form enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="button" onClick={this.uploadFile.bind(this)}>上传</button>
</form>

JavaScript代码：

uploadFile() {
  const formData = new FormData();
  const fileInput = document.querySelector('input[type="file"]');
  for (let i = 0; i < fileInput.files.length; i++) {
    formData.append('fileList', fileInput.files[i]);
  }
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    console.log(response);
  });
}

NodeJS代码同示例1。

以上就是基于JavaScript和HTML5实现多文件上传的攻略。