HTML 文件上传功能实现

文件上传是Web开发中常见的功能，可以通过HTML表单结合后端处理来实现。

基础HTML表单实现

使用元素创建文件上传控件：

关键点：

• enctype="multipart/form-data"必须设置，否则文件无法上传
• method必须设为post
• input的type必须为file

进阶功能实现

添加多文件选择和限制：

• multiple属性允许选择多个文件
• accept属性限制可上传的文件类型

JavaScript增强

使用JavaScript实现预览和验证：

document.getElementById('fileToUpload').addEventListener('change', function(e) {  const file = e.target.files[0];  if(file.size > 5 * 1024 * 1024) {    alert('文件大小不能超过5MB');    e.target.value = '';  }    // 图片预览  if(file.type.match('image.*')) {    const reader = new FileReader();    reader.onload = function(e) {      document.getElementById('preview').src = e.target.result;    }    reader.readAsDataURL(file);  }});

服务器端处理示例(Node.js)

const express = require('express');const multer = require('multer');const upload = multer({ dest: 'uploads/' });app.post('/upload', upload.single('fileToUpload'), (req, res) => {  // req.file包含上传文件信息  res.send('文件上传成功');});

安全注意事项

• 验证文件类型和大小
• 重命名上传文件避免冲突
• 限制上传目录权限
• 扫描上传文件内容安全性

进度显示实现

使用XMLHttpRequest或Fetch API显示上传进度：

const xhr = new XMLHttpRequest();xhr.upload.onprogress = function(e) {  const percent = (e.loaded / e.total) * 100;  document.getElementById('progress').value = percent;};

现代替代方案

考虑使用第三方库简化实现：

• Dropzone.js
• Fine Uploader
• Uppy

这些方案提供拖放上传、分块上传等高级功能。

热爱从来都不分轻重，随手而为的美好，也值得被记录。收藏点赞关注转发都有积分哦。

点个关注
持续分享
不套路、不加密，关注不迷路！