如何在nodejs中利用ajax实现网页无刷新上传图片功能 - 行业资讯

　　介绍

这篇文章给大家介绍如何在nodejs中利用ajax实现网页无刷新上传图片功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

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

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

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

html部分

& lt; div 类=癴orm-group"比; 　　& lt;才能label> File input 　　& lt;才能input 类型=癴ile", name=癴ile", id=癴ile"比; 　　& lt;才能p id=皉esult"祝辞& lt;/p> 　　& lt;才能img id=癶ttps://www.yisu.com/zixun/img", src=" "> 　　

　　<按钮id="上传" class=" btn btn-default ">提交

这里注意<代码> 输入标签的<代码>类型=癴ile"

js部分:

function 还是(){ 　　,var file =, . getelementbyid (“file") 　　,var formData =, new FormData (); 　　,formData.append(& # 39;文件# 39;,file.files [0]); 　　,. ajax({美元　　,,url: & # 39;/上传# 39; 　　类型:才能,& # 39;文章# 39; 　　,,数据:formData,//才能,异步:,假的, 　　,,缓存:假的, 　　contentType才能:假的, 　　processData才能:假的, 　　,,成功:功能(数据){ 　　,,如果(200,===,data.code), { 　　,,,$(& # 39;#结果# 39;). html(“上传成功!“); 　　,,,$ (& # 39;# img # 39;) .attr (& # 39; src # 39;, data.data); 　　,,},{else 　　,,,$(& # 39;#结果# 39;). html(“上传失败!“); 　　,,} 　　,,console.log (& # 39; imgUploader upload 成功# 39;); 　　,,}, 　　,,错误:函数(){ 　　,,美元(“# result") . html(“与服务器通信发生错误“); 　　,,} 　　,}); 　　} 　　　　function postPage (), { 　　,,,var uploada =, . getelementbyid(& # 39;上传# 39;); 　　,,,uploada.addEventListener (“click" function (), { 　　,,,,,还是(); 　　,,,},假); 　　} 　　　　时间=window.onload function (), { 　　postPage才能(); 　　}

nodejs部分:

乘是表达官方推荐的文件上传中间件。

文件上传有以下方法

upload.single(“文件# 39;),,//适用于单文件上传。　　upload.array(“文件# 39;num),,//适用于多文件上传,num为最多上传个数,上传文件的数量可以小于num。

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

文件为上传字段名称,当使用形式表单提交方式上传时,必须与表单上传的名字属性保持一致。

关于如何在nodejs中利用ajax实现网页无刷新上传图片功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。