# html+js上传多个图片，页面回显图片，后台解析图片并上传到服务器

最新推荐文章于 2025-05-15 15:15:21 发布

洛--

最新推荐文章于 2025-05-15 15:15:21 发布

阅读量5.4k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43642706/article/details/89099742

本文介绍了如何使用HTML和JS实现多图片的上传并展示在页面上，详细讲解了HTML页面的设置，包括input标签的属性调整以及如何通过Vue框架的@change方法实现图片预览。同时，提供了JS部分的代码示例，利用ajaxFileUpload.js进行文件上传。后台接收部分未给出具体实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html页面

1.在input标签内加上这个属性就可以一次性上传多个文件
在这里插入图片描述

2.长按ctrl键选择多个图片
在这里插入图片描述
效果如图：

上面图中显示选中五个文件，并且在页面回显，下面js里面有回显代码

2.js页面回显图片+多文件上传

1.在input框下面定义显示图片的div区域，在input标签里面写上onchange方法，因为我用的是vue框架，所以写的是@change:

2.在方法里面写上代码，这样可以把所有图片都遍历显示出来

setImagePreview:function(){
            //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
            //获取选择图片的个数
			var dom = document.getElementById("img");
			var files = dom.files;
            var length = files.length;
            var imgObjPreview = documen