使用Ajax将文件上传到Node.js

Question

I am trying to upload image to nodejs server using ajax but it fails to get file.

Client Side

function sendFileToServer(file){
    var formData = new FormData();
    formData.append('profile_image',file,file.name);
    $.ajax({
        type: "POST",
        url: "URL",
        data: formData,
        dataType:'json',
        processData: false,
        success: function (data) {

            alert("Data Uploaded: "+data);
        },
        error : function(err){
            alert(JSON.stringify(err));
        }
    });
}
$("#profile_image_2").change(function(){
    var file = this.files[0];
    sendFileToServer(file);
});

Server Side

var multer  = require('multer');
var mime = require('mime-lib');
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './public/upload/')
    },
    filename: function (req, file, cb) {
        console.log("filename exte "+file.mimetype);
        console.log(mime.extension(file.mimetype));
        cb(null, Date.now() + '.' + mime.extension(file.mimetype)[0]);
        //crypto.pseudoRandomBytes(16, function (err, raw) {
        //    cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype));
        //});
    }
});
var uploading = multer({ storage: storage });
router.post('/profile',uploading.single('profile_image') ,function(req,res){

    if (req.file){
        res.json("In here");

    }else{
        res.json("FILE DOES NOT EXIST");//ALWAYS ENDS UP HERE
    }

});

When i try it in bare form it works fine, but not using ajax. Please help

Answer 1

Try to use jQuery Form Plugin . It will make this for you.