node.js+express+jade系列六：圖片的上傳

安裝npm install formidable

先把文件上傳到臨時文件夾，再通過fs重命名移動到指定的目錄即可

fs.rename即重命名，但是fs.rename不能誇磁盤移動文件，所以我們需要指定上傳的臨時目錄要和最終目錄在同一磁盤下

前段請求

方法1：使用form標簽和submit提交

　　   form(action='/uploadImg', method="post", enctype="multipart/form-data" )
         input(type="file", id="file1", name="file1")
         br
         button(type="submit", id="bt1", name="bt1") upload

方法2：ajax，post提交

　　　　input(type="file", id="file1", name="file1")

           button(id="upload", name="upload") submit

           javascript方法

　　　　$("#upload").click(function(){

　　　　　　var data = new FormData();

　　　　　　var files = $("#file1")[0].files;

　　　　　　if(files){

　　　　　　　　data.append("file", files[0]);

　　　　　　}

　　　　　　$.ajax({

　　　　　　　　type: 'post',

　　　　　　　　dataType: 'json',

　　　　　　　　url:'/uploadImg',

　　　　　　　　data : data,

　　　　　　　　contentType: false,

　　　　　　　　processData: false,

　　　　　　　　success : function () {}

　　　　　　}　　　　

上傳實現方法：form解析后的files是個對象，所以可以實現多文件上傳

tool.uploadImg =function(req, res){
    var fs = require('fs');
    var formidable = require("formidable");
    var form = new formidable.IncomingForm();
    form.uploadDir = "./public/upload/temp/";//改變臨時目錄
    form.parse(req, function(error, fields, files){
        for(var key in files){
            var file = files[key];
            var fName = (new Date()).getTime();
            switch (file.type){
                case "image/jpeg":
                    fName = fName + ".jpg";
                    break;
                case "image/png":
                    fName = fName + ".png";
                    break;
                default :
                    fName =fName + ".png";
                    break;
            }
            console.log(file.size);
            var uploadDir = "./public/upload/" + fName;
            fs.rename(file.path, uploadDir, function(err) {
                if (err) {
                    res.write(err+"\n");
                    res.end();
                }
                res.write("upload image:<br/>");
                res.write("<img src='/imgShow?id=" + fName + "' />");
                res.end();
            });
        }
    });
};

顯示上傳后的文件

tool.imgShow = function(req, res){
    var fs = require("fs");
    var arg = tool.handleGetArg(req, res);
    var uploadDir = "./public/upload/" + arg["id"];
    fs.readFile(uploadDir, "binary", function(err, file){
        if(err){
            res.write(err+"\n");
            res.end();
        }else{
            res.write(file, "binary");
            res.end();
        }
    });
};