当前位置: 代码网 > it编程>网页制作>html5 > JavaScript多图片上传:如何保存所有图片地址而不是仅保存最后一张?

JavaScript多图片上传:如何保存所有图片地址而不是仅保存最后一张?

2025年03月29日 html5 我要评论
关于javascript图片上传路径处理的疑问在进行多张图片上传时,如何将所有图片的地址都保存下来,而不是只保存最后一张图片的地址,是一个常见问题。本文将针对以下代码片段,解释如何修改代码以实现此功能

关于javascript图片上传路径处理的疑问

在进行多张图片上传时,如何将所有图片的地址都保存下来,而不是只保存最后一张图片的地址,是一个常见问题。本文将针对以下代码片段,解释如何修改代码以实现此功能。

代码片段展示了一个使用webuploader插件实现多图片上传的功能。uploader.on('uploadsuccess', function(file,response) { ... }); 这段代码会在每次图片上传成功后执行,但是原代码中$("#info3").val(json.stringify(response.imgurl)); 这行代码每次都会覆盖#info3 input框中的值,导致最终只能获取到最后一张图片的地址。

为了解决这个问题,我们可以创建一个数组来存储所有上传图片的地址,并在每次上传成功后将新的地址添加到数组中。最后,再将数组中的所有地址以某种格式连接起来,赋值给#info3 input框。

修改后的代码如下:

var imgurls = [];

uploader.on('uploadsuccess', function(file,response) {
    $("#imgs_url").append(json.stringify(response.imgurl)+"<br>");

    imgurls.push(json.stringify(response.imgurl));

    $("#info3").val(imgurls.join(', '));
});
登录后复制

这段代码首先定义了一个空数组imgurls。在每次上传成功后,它会将返回的图片地址json.stringify(response.imgurl)添加到imgurls数组中。最后,它使用join(', ')方法将数组中的所有地址用逗号和空格连接起来,并将结果赋值给#info3 input框。这样,#info3 input框中就包含了所有上传图片的地址。 $("#imgs_url").append(json.stringify(response.imgurl)+"
"); 这行代码则保持不变,继续在页面上显示所有图片地址。 通过这种方式,就能正确地获取所有上传图片的地址了。

以上就是javascript多图片上传:如何保存所有图片地址而不是仅保存最后一张?的详细内容,更多请关注代码网其它相关文章!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com