前端H5实现多图片上传并预览

2024-07-11 03:15| 来源: 网络整理| 查看: 265

多文件上传并预览

利用input 的type='file" 可以实现文件的上传，不过只支持单个文件上传。只有给input加上multiple属性才能实现多个文件同时上传。好了，下面我们来实现一个简单的多图片上传并预览的例子

点击上传图片

这是html结构，di=img-box的盒子是后面放预览图片的。下面是js代码：

window.onload=function(){ var input=document.getElementById("uploadfile"); var div; // 当用户上传时触发事件 input.onchange=function(){ readFile(this); } //处理图片并添加都dom中的函数 var readFile=function(obj){ // 获取input里面的文件组 var fileList=obj.files; //对文件组进行遍历，可以到控制台打印出fileList去看看 for(var i=0;i 点击上传图片

css：

/*外层div*/ .input-file-box{ border: 1px solid gray; width: 150px; height: 150px; position: relative; text-align: center; border-radius: 8px; } /*文字描述*/ .input-file-box > span{ display: block; width: 100px; height: 30px; position: absolute; top: 0px; bottom: 0; left: 0; right: 0; margin: auto; color: gray; } /*input框*/ .input-file-box #uploadfile{ opacity: 0; width: 100%; height: 100%; cursor: pointer; }

完成，文中如有错误，望大神指点~

【本文地址】

前端H5实现多图片上传并预览

前端H5实现多图片上传并预览

今日新闻

推荐新闻