html+js用form表单上传图片到指定文件夹并在前端显示图片

首先，你需要在你的HTML文件中添加一个包含文件上传功能的表单：

<form id="image-form">
  <input type="file" id="image" name="image">
  <button type="submit">上传</button>
</form>

接下来，在你的JavaScript文件中，你需要使用Ajax来向服务器发送请求，将上传的图片文件发送到指定的文件夹中：

const form = document.getElementById('image-form');
const input = document.getElementById('image');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单默认提交行为

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

  // 向服务器发送POST请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.send(formData);

  // 监听上传进度
  xhr.upload.addEventListener('progress', (event) => {
    const percent = (event.loaded / event.total) * 100;
    console.log(`上传进度：${percent}%`);
  });

  // 监听上传完成事件
  xhr.addEventListener('load', () => {
    console.log('上传完成！');
  });
});

在服务器端，你需要使用Node.js的Express框架来处理这个请求，并将上传的文件保存到指定文件夹中：

const express = require('express');
const multer = require('multer');

const app = express();

// 设置文件上传路径
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  }
});

const upload = multer({ storage });

// 处理文件上传请求
app.post('/upload', upload.single('image'), (req, res) => {
  res.send('上传成功！');
});

// 在静态资源目录中提供上传的文件
app.use('/uploads', express.static('uploads'));

app.listen(3000, () => {
  console.log('Server is running on port 3000.');
});

最后，在你的HTML文件中，你可以使用`URL.createObjectURL()`方法来在前端显示上传的图片：

const imageUrl = URL.createObjectURL(input.files[0]);
const imageElement = document.createElement('img');
imageElement.src = imageUrl;
document.body.appendChild(imageElement);

这样就完成了上传图片，并在前端显示图片的功能。需要注意的是，这个示例只是一个简单的演示，实际应用中需要考虑文件上传的安全性和服务器端的性能问题。