前几天在腾讯云社区看了一篇关于文件上传的文章<文件上传那些事>，大致讲了下面h5上传的几张图片核心原理，但是没有后端接受的服务器代码，是无法测试的。没有具体的例子，都是一些基本原理的片段，ui界面也不好看，所以准备做一个图片上传网站作为那篇文章的补充。效果如图：点击上传后，文件会放在后台的uploads文件夹下。如果上传成功，页面会弹出上传成功的提示框。如果上传失败，会弹出失败提示框。如果网速比较慢，上传过程中会显示进度条。开发准备使用常见的表单提交方式实现文件上传。1.编写前端代码submit">设置action为提交地址，enctype="multipart/form-data"设置提交表单的域名为imgfile2。编写后端测试的代码这里我们使用express框架，需要先安装这个框架，然后使用static中间件指定我们jscsshtml文件的放置目录。varapp=express();app.use(express.static('dist'))下载用于处理上传文件的插件multer。readme.md文件中有基本的使用方法。我们复制的代码示例稍加修改即可使用。指定文件上传路径上传，然后用当前日期和文件名命名上传的文件。imgfile域名必须严格对应前端表单文件的域名。完整代码如下："usestrict";exports.__esModule=true;varexpress=require("express");varmulter=require("multer");varstorage=multer.diskStorage({destination:function(req,file,cb){cb(null,'./uploads');},filename:function(req,file,cb){cb(null,`${Date.now()}-${file.originalname}`)}})varupload=multer({storage:storage});varapp=express();app.use(express.static('dist'));//varcpUpload=upload.fields([{name:'imgfile',maxCount:12}])app.post('/uploadimg',upload.array('imgfile',40),function(req,res,next){varfiles=req.filesconsole.log(files)if(!files[0]){res.send('错误');}else{res.send('成功');}console.log(文件);})varserver=app.listen(9999,'localhost',function(){console.log('serverisrunningatport9999...');});这样选择文件，点击提交按钮后，文件就会上传到服务器的uploads文件夹中。利用H5和ajax技术实现文件上传不刷新1.改造原来的文件选择按钮，让它变成一个点击选择文件的可爱小图标。这个放代码太简单了。具体思路是在背景图片上打一个a标签，设置上传文件的大小inputtype="file"和a标签一样大，放在a标签上，opacity设置为0透明的。点击a实际上是点击inputtype="file"2.选择文件后生成缩略图。基本思路是监听inputtype="file"的onchange事件。如果选择了一个文件，使用FileReader生成一张图片data:url添加到div.preview中动态生成的img中，并将div.preview设置为flex布局，可以灵活放置预览图片。html
