Node.js（Express4.x）的Ajax处理2——文件上

2016-09-19 本文已影响1004人 Mike的读书季

0.目标

AJAX即“Asynchronous Javascript And XML*”（异步JavaScript和XML），是指一种创建交互式应用的网页开发技术。
通过ajax方式上传文件可以避免刷新网页，本节将做一个简单的Demo来说明如何操作。

【参考代码】

1.部署Express

如果不知道如何部署，可参照：部署Express

另外，可以参考如何通过提交表单刷新网页的方式上传文件：文件上传

2.服务器端

这里要用到multer中间件，这个需要自行安装：

npm install multer --save

在routes/index.js中引用multer，另外，因为需要用到文件系统，所以还要引用fs模块：

var multer  = require('multer');
var fs = require("fs");

增加一个路由，用来显示页面：

/* 浏览器输入地址（如127.0.0.1:3000/upload）后，显示views/upload页面，此页面使用默认引擎（这里是jade）渲染 */
router.get('/upload', function(req, res, next) {
  res.render('upload');
});

增加一个路由，用来处理上传操作：

var upload = multer({ dest: '/tmp/' })
router.post('/file_upload', upload.array('image'), function(req, res, next) {

    console.log(req.files[0]);  // 上传的文件信息
    
    if(undefined == req.files[0]){
        res.json(['failed', {msg:"没有选择要上传的文件！"}]);
        return -1;
    }

    var des_file = "./files/" + req.files[0].originalname;
    fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {
            if( err ){
                console.log( err );
                res.json(['failed', {msg:err}]);
            }else{
                response = {
                    msg:'File uploaded successfully', 
                    filename:req.files[0].originalname,
                };
                console.log( response );
                res.json(['success', response]);
            }
        });
    });
});

注意
在根目录下创建一个文件夹，名称是files。如果没有先创建，上传文件时会报错。

3.客户端页面

3.1 添加js文件

在public/javascripts文件夹下，放入两个文件：

jquery.min.js // 自行下载jquery
upload.js // 空白文件，下面会给出代码

其中upload.js代码如下：

var OL_Action_Root = "http://127.0.0.1:3000";
function Req_ajax()
{           
    var formData = new FormData($("#imagelist")[0]);
    $.ajax({
        url: OL_Action_Root+'/file_upload',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            var res = data;
            if(res[0] == 'success')
            {
                document.getElementById("status").innerHTML = "<span style='color:green'>文件上传成功！<br>文件名为："+res[1].filename+"</span>";
            }
            else
            {
                document.getElementById("status").innerHTML = "<span style='color:#EF0000'>文件上传失败！<br>原因是："+res[1].msg+"</span>";
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            document.getElementById("status").innerHTML = "<span style='color:#EF0000'>连接不到服务器，请检查网络！</span>";
        }
    });
}

3.2 添加页面

在views文件夹下，添加一个文件upload.jade

doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        h1 Express通过Ajax文件上传
        h3 选择一个文件上传
            form(enctype="multipart/form-data" method="post" )#imagelist
                input(type="file" name="image")
                input(type="button" value="上传文件" onclick="Req_ajax()")
        
        p#status
        p#preview
        
    script(src='/javascripts/jquery.min.js')
    script(src='/javascripts/upload.js')