微客导航 » 文章资讯 » nodejs利用ajax实现网页无刷新上传图片实例代码

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

2024-02-20 17:30:03 271

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

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

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

html部分


Fileinput

提交

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

js部分：

functionuploadFile(){
varfile=document.getElementById("file")
varformData=newFormData();
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('imgUploaderuploadsuccess');
},
error:function(){
$("#result").html("与服务器通信发生错误");
}
});
}

functionpostPage(){
varuploada=document.getElementById('upload');
uploada.addEventListener("click",function(){
uploadFile();
},false);
}

window.onload=function(){
postPage();
}

nodejs部分：

varstorage=multer.diskStorage({
destination:function(req,file,cb){
cb(null,'./public/images')
},
filename:function(req,file,cb){
cb(null,file.originalname)
}
});
varupload=multer({
storage:storage
});
router.post('/upload',upload.single('file'),function(req,res,next){
varurl='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。

multer官方文档

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐