前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ，大体上讲了以下h5中图片上传的几个核心原理，但是没有后端接受的服务器代码，没法做测试。也没有具体的一个实例都是一些基本的原理片段，并且ui界面也不好看，我就准备给那篇文章作为补充做一个图片上传网站。
效果如图：
点击上传后，会把文件放到后台一个uploads文件夹下面，如果上传成功，那么页面会 弹出一个上传成功的提示框，如果上传失败，会弹出一个失败的提示框，如果网速比较慢，会显示出上传过程中的进度条。
开发准备
用普通的表单提交方法实现文件上传。
1.编写前端代码
<form action="uploadimg" method="POST" enctype="multipart/form-data">
<input type="file" name="imgfile" multiple>
<input type="submit" value="提交">
</form>
设置action为提交地址， enctype="multipart/form-data"
设置提交文件表单域名为 imgfile
2.编写后端测试用代码
这里我们采用了express框架，需要先安装这个框架，然后使用静态中间件指定放置我们js css html 文件的目录
var app = express();
app.use(express.static('dist'))
下载处理上传文件的插件 multer
在readme.md文件中有基本的使用方法，我们复制过来代码实例稍微改改就可以使用了。把文件上传路径指定到uploads,然后用当前日期和文件名命名上传过来的文件。这个imgfile域名必须严格和前端表单文件域名对应起来。
完整代码如下：
"use strict";
exports.__esModule = true;
var express = require("express");
var multer = require("multer");
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, './uploads');
},
filename: function(req, file, cb) {
cb(null, `${Date.now()}-${file.originalname}`)
}
})
var upload = multer({ storage: storage });
var app = express();
app.use(express.static('dist'));
//var cpUpload = upload.fields([{ name: 'imgfile', maxCount: 12 }])
app.post('/uploadimg', upload.array('imgfile', 40), function(req, res, next) {
var files = req.files
console.log(files)
if (!files[0]) {
res.send('error');
} else {
res.send('success');
}
console.log(files);
})
var server = app.listen(9999, 'localhost', function() {
console.log('server is running at port 9999...');
});
这样选择文件，点击提交按钮后文件就被上传到了服务器uploads文件夹下
用H5和ajax技术实现无刷新文件上传
1.改造原来的选择文件按钮，让它变成一个可爱的小图标，点击后选择文件。
(责任编辑：admin)