nodejs使用ajax代码,nodejs利用ajax实现网页无刷新上传图片实例代码

通常情况下上传图片是要通过提交form表单来实现的，但是这又不可避免的产生了网页转。

利用ajax技术和FormData()对象可以有效的解决这个问题

废话不多说 直接上关键代码：

html部分

File input

提交

这里注意input标签的type="file"

js部分：

function uploadFile(){

var file = document.getElementById("file")

var formData = new FormData();

formData.append('file',file.files[0]);

$.ajax({

url: '/upload',

type: 'POST',

data: formData,

// async: false,

cache: false,

contentType: false,

processData: false,

success: function(data){

if(200 === data.code) {

$('#result').html("上传成功！");

$('#img').attr('src',data.data);

} else {

$('#result').html("上传失败！");

}

console.log('imgUploader upload success');

},

error: function(){

$("#result").html("与服务器通信发生错误");

}

});

}

function postPage() {

var uploada = document.getElementById('upload');

uploada.addEventListener("click",function () {

uploadFile();

},false);

}

window.onload = function () {

postPage();

}

nodejs部分：

var storage = multer.diskStorage({

destination: function (req, file, cb){

cb(null, './public/images')

},

filename: function (req, file, cb){

cb(null, file.originalname)

}

});

var upload = multer({

storage: storage

});

router.post('/upload', upload.single('file'), function (req, res, next) {

var url = 'http://' + req.headers.host + '/images/' + req.file.originalname

res.json({

code : 200,

data : url

})

});

multer是express官方推荐的文件上传中间件。

文件上传有以下方法

upload.single(‘file'), //适用于单文件上传。

upload.array(‘file',num), //适用于多文件上传，num为最多上传个数，上传文件的数量可以小于num。

同时还提供了混合上传，比如A类文件1个，B类文件2个。官方API有详细说明。

file为上传字段名称，当使用form表单submit方式上传时，必须与表单上传的name属性保持一致。

对上传文件大小限制，名称限制等均可在limits中加上，具体可加属性，请参考官方api。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。