本文介绍如何利用HTML5 FileAPI实现前端图片预览，并通过FormData与Node.js后端对接完成上传。详细讲解了FileReader读取文件、base64编码预览以及使用formidable库处理服务端文件保存的具体步骤与代码示例。
HTML5 FileAPI实现图片预览
HTML5提供了FileAPI接口。
借助HTML5的FileAPI，处理图片上传的操作变得更加简便。
具体实现案例如下。
HTML结构代码示例。
<div class="form-group">
<label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label>
<div class="col-md-9">
<input type="text" readonly="" class="form-control" placeholder="点击选择文件">
<input type="file" id="modal_inputFile">
<img src="" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">
</div>
</div>运行效果展示。
通过代码$('#modal_inputFile')[0].files[0]可以获取所选图片的文件信息对象。
该对象包含name、size和type等常用属性，便于后续处理。
接下来实现图片的本地预览功能。
用户选择图片后，通常希望立即看到预览效果，HTML5对此提供了支持。
HTML5引入了FileReader这一新对象。
FileReader接口的主要功能是将文件读取到内存中，并获取文件数据。
利用该接口读取的数据，可以通过data URL的方式实现图片预览。
var file = document.getElementById(modal_inputFile'').files[0];
if (!file) {
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var ib_pre = document.getElementById('modal-pre');
ib_pre.src = this.result;
}
至此，前端图片预览功能已实现。
进一步检查img标签的src属性值。
<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">可以看到src的值是经过base64编码的字符串。
Node.js后端处理图片上传
接下来探讨如何与后端服务器进行数据交互。
既然前端通过文件API已满足展示需求，下一步便是将数据上传至服务端，Node.js是理想的选择。
前端发起网络请求的部分。
以下是前端发送上传请求的代码示例。
//图片上传
$('#preUpload').on('click', function(e) {
var data = new FormData();
var _files = $("#modal_inputFile")[0].files[0];
var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];
if(ect !== 'png'){
alert('请上传png图片!')
return;
}
data.append("modal_file", _files);
$.ajax({
type: 'post',
dataType: 'json',
url: window.stnt_hosts + 'thirdAdmanage/upload/modal',
data: data,
contentType: false,
processData: false
}).done(function(data, status) {
console.log('上传成功');
}).fail(function(err) {
console.log('上传失败');
})
})使用FormData对象来封装需要上传的文件数据。
这里的data变量是一个经过序列化的对象，后端接收处理即可。
后端接收与处理逻辑。
服务端采用node-formidable库来处理图片的保存等操作。
相关后端代码示例。
var formidable = require("formidable");
var form = new formidable.IncomingForm();
//临时目录
form.uploadDir = './upload/';
//预览图片上传
router.post('/upload/modal', function(req, res, next) {
form.parse(req, function(err, fields, files) {
if (files.modal_file) {
rename(files.modal_file.path, files.modal_file.name, 'preview')
res.send({
stats:'success',
data:[]
})
}
})
});
function rename(old, _new, code, bId) {
var path = './upload/' + code + '/';
fs.exists(path, function(exists) {
if (!exists) {
fs.mkdir(path)
console.log('创建文件夹！')
}
fs.renameSync(old, path + _new, function(err) {
if (err) {
console.log(err);
return;
}
console.log('上传成功!')
})
})
}
使用fs.renameSync的原因在于，配置中的临时目录form.uploadDir存储的是内存中的临时数据，并非最终图片文件。
处理过程类似如下逻辑。
需要调用fs相关方法，将文件重新保存至指定路径，此时文件即为完整的图片。
总结与注意事项。
在form.parse(req, function(err, fields, files)回调中，fields和files具体是什么对象，建议通过浏览器调试工具自行查看，理解后会更加清晰。
此前若不明确，直接通过浏览器搜索往往难以找到准确答案，结果可能不尽如人意。
因此遇到不确定的情况，务必查阅GitHub官方文档或源码。
此外，app.use(bodyParser.urlencoded({ extended: true }));的作用是解析常规form表单提交的数据，即请求头包含Content-Type: application/x-www-form-urlencoded的情况。
而app.use(bodyParser.json())用于解析JSON格式的数据。
以上内容为本文的全部介绍，希望对读者在学习或工作中有所帮助，欢迎支持本站。