正文
ajax上传文件及nodeJS接收
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
ajax文件上传需要用到FormData
官方介绍
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
自己写的简单实例：
html部分：
<body>
<form action="/" enctype="multipart/form-data" id="form">
姓名：<input type="text" name="username" id=""><br>
年龄：<input type="text" name="age" id=""><br>
<br>
本人照片：<input type="file" name="img" id="" value="选择照片"><br><br>
<input type="button" value="确认提交" name="btn" id="btn">
</form>
</body>
<script src="./jquery.js"></script>
<script>
$('#btn').click(function(){
// 利用formData将整个表单数据打包
var inpData = new FormData(document.getElementById('form'));
$.ajax({
url:'http://soul:7777/file',
type:'post',
contentType: false,
data:inpData,// 打成的数据包可以直接通过send发送
processData: false,
success:function(data){
if(data){
alert('成功')
}else{
alert('失败')
}
}
})
})</script>
js服务端接收文件需要用到formidable模块，帮助我们处理文件等数据；
js部分代码：
var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.listen('7777', function () {
console.log('欢迎来到6的世界');
});
server.on('request', function (req, res) {
res.setHeader('Access-Control-Allow-Origin','*');
if (req.url == '/file') {
var fd = require('C:/Users/Administrator/AppData/Roaming/npm/node_modules/formidable');
var form = new fd.IncomingForm();
// 如果文件移动跨盘符依然需要提前设置上传文件的路径，默认在c盘
form.uploadDir = 'E:/img';
form.parse(req, function (err, fields, files) {
// console.log(filds); // 表单数据
// console.log(files); // 上传文件的数据
// 需要将上传后的文件移动到指定目录
fs.rename(files.img.path, './img/' + files.img.name, function (err) {
// 获取json数据进行解析
fs.readFile('./db.json', 'utf8', function (err, json_str) {
var json_arr = JSON.parse(json_str);
// 组装新数据
// id 获取数组中最后一个元素的id+1,就是新数组的id值
fields.id = json_arr[json_arr.length - 1].id + 1; // 将已经移动好的图片地址加到新数据里面
fields.img = '/img/' + files.img.name;
// 将新数据加入数组中
json_arr.push(fields); // 将数组重新转为字符串写入josn文件
fs.writeFile('./db.json', JSON.stringify(json_arr), function (err) {
if (!err) {
// 返回提示信息
res.end('1');
} else {
res.end('0');
}
});
});
});
});
}
});
多文件上传需要在input：file 标签添加属性multiple="multiple"（网上看到的）
小结一下：
ajax上传文件关键在于formdata对象的使用，服务端技术关键在于formidable模块对数据进行处理，然后对json文件进行增删改。
