原生JS实现文件上传

下面是“原生JS实现文件上传”的详细攻略：

1. HTML结构

在HTML文件中添加一个表单，包含一个文件输入和一个提交按钮。

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

2. JS代码实现

使用XMLHttpRequest对象完成文件上传。代码如下：

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  if (!file) return; // 没有选择文件

  var xhr = new XMLHttpRequest();
  // 处理上传进度
  xhr.upload.onprogress = function(event) {
    var percent = 100 * event.loaded / event.total;
    console.log('上传进度：' + percent + '%');
  };
  // 当上传完成时调用
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功');
    }
  }
  xhr.onerror = function() {
    console.log('上传失败');
  }
  // 发送请求
  xhr.open('POST', '/upload', true);
  var formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}

说明：
1. 获取input元素，并获取选中的文件。
2. 创建XMLHttpRequest对象。
3. 设置上传进度的回调函数。
4. 设置上传完成时的回调函数。
5. 设置上传失败时的回调函数。
6. 打开请求，设置POST方法和URL地址。
7. 创建FormData对象，将文件添加到表单数据中。
8. 发送请求。

3. 文件处理

文件上传完成后，服务器端需要接收文件并进行处理。这里给出Node.js的示例代码：

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

//处理文件上传
app.post('/upload', upload.single('file'), function(req, res, next) {
  if (!req.file) {
    return res.status(400).send('请选择要上传的文件');
  }
  console.log(req.file.originalname + '上传成功');
  return res.send('文件上传成功');
});

app.listen(3000, function() {
  console.log('服务已启动，端口号：3000');
});

说明：
1. 引入express框架和multer文件上传中间件。
2. 创建multer的upload对象，指定文件保存的目录。
3. 创建路由处理文件上传请求。
4. 判断是否接收到文件。
5. 文件上传成功，将文件名打印到控制台。
6. 返回上传成功的响应信息。
7. 启动服务器并监听3000端口。

4. 示例说明

示例1

用户选择图片文件，上传到服务器。

输入为：一个图片文件，点击上传按钮。

输出为：上传成功，并将图片文件保存到服务器。

实现过程：
1. 在HTML页面中添加一个表单，包含一个文件输入和一个提交按钮。

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

1. 使用XMLHttpRequest对象完成文件上传。

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  if (!file) return; // 没有选择文件

  var xhr = new XMLHttpRequest();
  // 处理上传进度
  xhr.upload.onprogress = function(event) {
    var percent = 100 * event.loaded / event.total;
    console.log('上传进度：' + percent + '%');
  };
  // 当上传完成时调用
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功');
    }
  }
  xhr.onerror = function() {
    console.log('上传失败');
  }
  // 发送请求
  xhr.open('POST', '/upload', true);
  var formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}

1. 服务器端处理文件上传，并返回上传成功的响应信息。

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

//处理文件上传
app.post('/upload', upload.single('file'), function(req, res, next) {
  if (!req.file) {
    return res.status(400).send('请选择要上传的文件');
  }
  console.log(req.file.originalname + '上传成功');
  return res.send('文件上传成功');
});

app.listen(3000, function() {
  console.log('服务已启动，端口号：3000');
});

示例2

用户选择文本文件，上传到服务器。

输入为：一个文本文件，点击上传按钮。

输出为：上传成功，并将文本文件保存到服务器。

实现过程：
1. 在HTML页面中添加一个表单，包含一个文件输入和一个提交按钮。

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

1. 使用XMLHttpRequest对象完成文件上传。

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  if (!file) return; // 没有选择文件

  var xhr = new XMLHttpRequest();
  // 处理上传进度
  xhr.upload.onprogress = function(event) {
    var percent = 100 * event.loaded / event.total;
    console.log('上传进度：' + percent + '%');
  };
  // 当上传完成时调用
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功');
    }
  }
  xhr.onerror = function() {
    console.log('上传失败');
  }
  // 发送请求
  xhr.open('POST', '/upload', true);
  var formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
}

1. 服务器端处理文件上传，并返回上传成功的响应信息。

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

//处理文件上传
app.post('/upload', upload.single('file'), function(req, res, next) {
  if (!req.file) {
    return res.status(400).send('请选择要上传的文件');
  }
  console.log(req.file.originalname + '上传成功');
  return res.send('文件上传成功');
});

app.listen(3000, function() {
  console.log('服务已启动，端口号：3000');
});

以上就是“原生JS实现文件上传”的完整攻略。希望对你有帮助。