一键jquery异步上传文件（图片）的实现（文件上传进度读取未做）

本文采用boostrap、、jquery、jade（html的一种模板）、nodejs实现

最终实现的效果：一个按钮在选择完文件后，自动上传到后台；

-改变input样式

在form表单中，用<a>包裹<input type="file">，让input隐藏，jade代码如下

form#index_new.form-horizontal(method="post",role="form",action="/admin/index/save",enctype="multipart/form-data")
input(type="hidden",name="index[_id]",value="#{index._id}")
.col-sm-2
a.btn.btn-primary.upload_index_img_box 添加图片
input(type="hidden",name="posterType",value="index")
input#upload_index_img(type="file",name="upload_poster")

其中第一个input(type="hidden")的作用是用来提交表单的数据index的_id到后台服务器，以使得后台接收到index._id的时候为'undefined'（个人处理习惯）

第二个input(type="hidden")的作用是用来提交图片类型到后台，也就是posterType='index'这个值，作为标识符，以方便文件的分类管理

利用”事件捕获“和”事件冒泡“，给外层a绑定点击事件来触发内层的input(type="file")以选择文件，源代码如下

var btnChooseFile = $('.upload_index_img_box');
var btnChooseHide = $('#upload_index_img');
btnChooseFile.click(function(event){
event.stopPropagation();
console.log(event.target);
console.log(this);
if (event.target==this) {
btnChooseHide.click();

}
});

其中.stopPropagation()用来阻止<a>的默认动作（似乎没有派上用场），由event.target==this来确保点击的对象是外层的<a>

为内层隐藏的input(type="file")设置.change()监听，上传结束时，触发ajax，向服务器端发送数据：

btnChooseHide.change(function(event){
if (btnChooseHide.val()!=='undefined') {
//html5的生成的表单数据对象
var form = new FormData($('#index_new')[0]);
$.ajax({
url: '/admin/index/save',
type: 'post',
//发送到服务器端的数据的格式，取消默认编码格式
contentType:false,
dataType:'json',
data: form,
//因为是图片，不要对其作序列化处理
processData:false,
success: function (data) {
if (data){
//对服务器返还的数据进行拼接处理
var id = data.index._id;
var img = data.index.img;
var date = data.index.meta.updateAt.split('T')[0];
var html = $('<tr class="item-id-'+id+'"></tr>')
var tdName = $('<td><a class="thumbnail"><img src="/upload/index/'+img+'" alt="点击查看大图"/></a></td>');
var tdDate = $('<td>'+date+'</td>');
var del = $('<td><button class="btn btn-danger del" type="button" data-id="'+id+'" data-type="index">删除</button></td>')
html.appendTo(tbody);
tdName.appendTo(html);
tdDate.appendTo(html);
del.appendTo(html);
}
},
err:function(jqHXR){
console.log(jqXHR.status);
}
});
return false;
}
});

这其中contentType不能设置为multipart/form-data，否则会报错。关键的三点是contentType、dataProcess、new FormData()，否则文件无法传到后台。

服务器端实现：

根据传过来的数据，进行一系列处理后，以初始路径地方式读取传过来的文件，再生成新的指定路径和新的文件名称，将文件写入到该路径下。完成文件的存储后，将数据传给前端，前端以jquery的方式对数据进行拼接插入，从而实现异步更新。

此外，数据还要对模板进行渲染，否则刷新页面后无法显示。

处理图片上传的中间件如下：

var fs = require('fs');
var path = require('path');
exports.save_poster = function(req,res,next){
console.log('req.files');
console.log(req.files);
var posterData = req.files.upload_poster;
var posterType = req.body.posterType;
var filePath = posterData.path;
var originalFilename = posterData.originalFilename;
if (originalFilename) {
fs.readFile(filePath,function(err,data){
//生成日期
var timestamp = Date.now();
//获取图片格式
var type = posterData.type.split('/')[1];
//由“日期.图片格式”生成文件名
var posterName = timestamp+'.'+type;
//__dirname获取当前文件夹（只是文件夹，不包括文件本身）的绝对路径
//合并下面的路径生成图片文件的存储路径
var newPath = path.join(__dirname,'../../','/public/upload/'+posterType+'/'+posterName);
fs.writeFile(newPath,data,function(err){
req.poster = posterName;
next();
});
});
}
else{
next();
}
};

前端图片的显示，以路径的方式显示即可，比如<img  src="/upload/index/文件名"/>，把文件名传递到前端即可