利用Ajax无刷新上传文件到Node.js服务器

撰写于 2015年1月30日修改于 2016年7月23日分类前端代码与禅标签 JavaScript / Node.js / jQuery

最近做一个垂直社区项目，图片上传是现如今社区的标配，何况面向的还是女性用户。后端使用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，则可以用下面的命令克隆：

1	$ git clone https://coding.net/Stiekel/Node.js-Ajax-Upload-File.git

也可以下载zip包，程序中的前端包都使用的是百度的公开库，后端代码使用npm管理，进入应用目录，执行如下的命令安装：

1	$ npm install

然后执行如下的命令可以启动应用：

1	$ node app.js

再通过浏览器访问http://ip:3000/即可。注意，上传的文件会保存在/tmp和public两个目录中。