node.js 通过ajax上传图片

    这个阶段，利用晚上剩余的时间用node.js+mongdb+express+jade去实现自己的一个博客网站，里面的发表博客中需要用到上传图片，嵌入到自己用textarea标签实现的markdown编辑器中。这部分实现是利用了html5的formData函数去实现

html代码(jade)：

form#uploadfile
    div.form-group
        input#inputfile(type="file" name="inputfile")
        p.help-block#upfiletip 只支持png和ipg格式的图片上传
    button.btn.btn-success(type="button" onclick="upFile()") 上传

ajax代码(javascript):

//判断图片的格式是否是png/ipg的格式
function judgePhotoExt(name){
    if(name.length === 0){
        $("#upfiletip").css("color","red");
        $("#upfiletip").text = "你没有选择任何图片！！！"
        return false;
    }
    var extName = name.substring(name.lastIndexOf('.'),name.length).toLowerCase();
    if(extName != '.png' && extName != '.ipg'){
        $("#upfiletip").css("color","red");
        $("#upfiletip").text = "只支持png和ipg格式的格式的文件!!!"
        return false;
    }
    return true;
}

//上传图片文件
function upFile(){
    var filename = $("#inputfile").val();
    if(judgePhotoExt(filename)){
        var data = new FormData();
　　　　var files = $("#inputfile")[0].files;
        if(files){
　　　　　　data.append("file", files[0]);
        }
        $.ajax({
            url: '/blog/photo/new',
            type: 'POST',
            data: data,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                var text = $("#content-textarea").val();
                text = text+"![图片提示]("+data+")";
                $("#content-textarea").val(text);
                $('#imageModal').modal('hide');
            },
            error: function(err){
                console.log(err);
            }
        })
    }
}

 注意：其中一定要注意的点：processData的属性要设置为false，这个是html5的属性，如果没有设置为false的话，这个地方会出问题。主要是文件的内容不希望转换成字符串。具体可查看jquery ajax的参数解释：对于FormData对象，你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段(引用别的网站的描述)
比如：

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "">">hey!"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "");
oReq.send(oMyForm);

这部分内容需要查看FormData对象的具体内容，可查看该网址：http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

node.js后台代码如下：

router.post('/photo/new',function(req,res,next){
    let form = new formidable.IncomingForm(); //创建上传表单
    form.uploadDir = UPLOAD_PATH;
    form.keepExtensions = true; //保留后缀
    form.maxFieldsSize = 4*1024*1024; //文件大小
    form.parse(req,function(err,fields,files){
        if(err){
            res.send("插入标签失败");
            return;
        }
        let extName = '';
        let urls = [];
        for(var key in files){
            let file = files[key];
            switch(file.type){
                case 'image/pjpeg':
                    extName = 'jpg';
                    break;
                case 'image/jpeg':
                    extName = 'jpg';
                    break;
                case 'image/png':
                    extName = 'png';
                case 'image/x-png':
                    extName = 'png';
                    break;
            }
            if(extName.length === 0){
                res.send("只支持png和jpg格式的图片文件");
                return;
            }
            let saveName = uuid.v1()+'.'+extName;
            let savePath = form.uploadDir+saveName;
            urls.push(PHOTO_URL+saveName);
            fs.renameSync(file.path,savePath);
        }
        res.send(urls[0]);
    })
})

使用formidable库辅助实现

其实里面最重要的还是FormData的使用，用html5实现这部分的异步上传还是比较方便的