上传多张图片并预览

来源：互联网发布：游族网络股票行情编辑：程序博客网时间：2024/05/29 18:28

上一篇写的是上传单张图片并预览，因为需求不一样，也顺便百度了一下上传多张图片并预览的，整理了一个demo,存一下，留着用。

不兼容IE。

实现效果：上传多张图片并预览；

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#divUL div{float: left;}</style></head><body><div class="wrapper"><input type="file" multiple="multiple" name="listInput" id="listInput" value="" /><div id="divUL"></div></div></body><script type="text/javascript">//多张document.getElementById("listInput").addEventListener("change",function(){var files = this.files;var oUL = document.getElementById("divUL");oUL.innerHTML = "";for(var i = 0;i < files.length;i++){oUL.innerHTML += '<div><img id="img'+i+'" /></div>'var imgList = document.getElementById("img"+i);imgList.style.height = "200px";imgList.style.width = "200px";imgList.src = window.URL.createObjectURL(files[i]);}});</script></html>

阅读全文

0 0