简单实现js上传文件功能

实现js上传文件功能主要分为以下几个步骤：

1. 创建HTML文件上传表单

创建一个表单，用于接收用户上传的文件。表单中需要包含一个<input type="file">的输入框，用于选择文件。同时也可以添加一些其它的表单元素，如文本框和按钮等，方便用户填写一些附加信息。

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

2. 编写上传文件的js代码

在表单提交前，需要编写一段js代码，用于处理用户上传的文件。这段代码需要监听表单的submit事件，获取用户选择的文件，然后发送一个AJAX请求，将文件上传到Web服务器上。

const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
  event.preventDefault()

  const fileInput = document.querySelector('input[type="file"]')
  const file = fileInput.files[0]
  const formData = new FormData()

  formData.append('file', file)

  const request = new XMLHttpRequest()
  request.open('POST', '/upload')
  request.send(formData)
})

3. 处理上传文件的Web服务端代码

最后，需要在Web服务器上编写一段代码，用于处理上传的文件。可以选择使用Node.js或其它Web框架，如Express和Koa等，来编写这段代码，并实现将上传的文件保存到服务器的磁盘上，或者将文件放入云存储服务中等操作。

下面是一个使用Node.js的示例：

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

const app = express()

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.send('上传成功')
})

app.listen(3000, () => {
  console.log('服务器已启动')
})

以上就是简单实现js上传文件功能的攻略了。

其中，在实现第二步中的js代码时，可以通过FormData对象来构建上传的数据。可以通过多次调用formData.append(name, value)方法来添加多个文件或者文本值。示例如下：

const fileInput = document.querySelector('input[type="file"]')
const files = fileInput.files

const formData = new FormData()
for (let i = 0; i < files.length; i++) {
  formData.append('files', files[i])
}
formData.append('name', '张三')

const request = new XMLHttpRequest()
request.open('POST', '/upload')
request.send(formData)

其中，上传的数据可以通过在Web服务器端的req.body和req.files对象中查看和获取。