利用Ajax无刷新上传文件到Node.js服务器
最近做一个垂直社区项目，图片上传是现如今社区的标配，何况面向的还是女性用户。后端使用Node.js，图片上传必然是要不刷新不用iframe了。顺便，也测试了一下Coding.net的“演示”功能，的确是方便免费够用，代码传上去基本零配置就可以跑起来了。这篇文章涉及的代码托管在Coding上，最终的例子也是运行在Coding的免费服务器上。
协议与结构
整个上传采用RFC1867协议，即基于HTML表单的文件上传协议。借助这个协议，为表单增加enctype="multipart/form-data"，再使用type为file的input控制来选择文件，然后便可用POST方法上传文件。
文件上传时会分段提交，借助Connect的connect-multiparty模块，即可接收各段组合整理为文件，并将文件存到临时目录，我们可再编写其它代码来处理文件。本例中，我们会把文件复制到public目录，以提供web访问。
整个示例程序包括以下几部分：
- HTML表单，负责文件的选择
- JavaScript组织表单数据，执行上传
- Node.js接受上传的文件，并负责文件的移动和组织
示例程序的代码托管在Coding上的Node.js-Ajax-Upload-File，在线演示地址为node-js-ajax-upload-file.codingapp.com。
下面开工。
HTML表单组织
表单很简单，就一个文件选择的控件。当type为file的input控件除了常规属性，还包括一个accept属性，用于定义可以选择的文件类型。
HTML中包括一个表单，一个提交按钮，和一个显示成功上传到服务器的图片的控件，主要代码如下：
<form class = "form-horizontal" enctype='multipart/form-data' method='post' action='javascript:;' role = "form" id = "frmUploadFile"> <div class = "form-group"> <label class = "control-label col-sm-2">上传选择</label> <div class = "col-sm-4"> <input type = "file" name = "files" class = "form-control" /> </div> </div> <div class = "form-group"> <div class = "col-sm-offset-2 col-sm-4"> <button class = "btn btn-primary" onClick = "uploadFile()">上传</button> <span class = "help-inline" id = "spanMessage">选择文件，并上传</span> </div> </div> </form> <div class = "row" style = "text-align: center"> <img id = "imgShow" /> </div>
完整代码请查看public/index.html。
Ajax执行上传
浏览器端的JavaScript会将表单中的数据格式化，再以POST方法上传文件，为了简便，使用了jQuery库来操作，具体代码比较简单，上传文件，然后根据服务器端的返回判定上传是否成功，如果成功，则显示图片。
代码包装为自定义的函数，由“发送”按钮的单击事件调用，代码如下：
function uploadFile(){ var formData = new FormData($("#frmUploadFile")[0]); $.ajax({ url: '/upload', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function(data){ if(200 === data.code) { $("#imgShow").attr('src', data.msg.url); $("#spanMessage").html("上传成功"); } else { $("#spanMessage").html("上传失败"); } console.log('imgUploader upload success, data:', data); }, error: function(){ $("#spanMessage").html("与服务器通信发生错误"); } }); }具体请参见文件pubilc/demo.js。
Node.js接收文件
通过POST接收到的文件，由connect-multiparty负责重新组织为文件，并存储到临时文件夹中，Linux默认为/tmp目录，然后再将文件信息放到req.files对象中，对象中按input的name属性来组织文件列表，我们上面的表单中的input控件name为files，所以文件的信息便存储在req.files.files中。通过它可获取文件的存储位置和文件名等信息。
整个服务器端的代码很简单，连同注释不过20多行，其中处理请求部分的代码如下：
var multipart = require('connect-multiparty'); app.post('/upload', multipart(), function(req, res){ //get filename var filename = req.files.files.originalFilename || path.basename(req.files.files.ws.path); //copy file to a public directory var targetPath = path.dirname(__filename) + '/public/' + filename; //copy file fs.createReadStream(req.files.files.ws.path).pipe(fs.createWriteStream(targetPath)); //return file url res.json({code: 200, msg: {url: 'http://' + req.headers.host + '/' + filename}}); });完整代码请参阅app.js。
示例程序的运行
如果系统中已经安装了git，则可以用下面的命令克隆：
|
|
也可以下载zip包，程序中的前端包都使用的是百度的公开库，后端代码使用npm管理，进入应用目录，执行如下的命令安装：
|
|
然后执行如下的命令可以启动应用：
|
|
再通过浏览器访问http://ip:3000/即可。注意，上传的文件会保存在/tmp和public两个目录中。
来自：http://chensd.com/2015-01/Node-js-Ajax-Upload-File.html