1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>上传</title> 6 </head> 7 <body> 8 9 <input id="filelist" type="file" multiple> 10 <div id ="list"></div> 11 <script> 12 var filelist = document.getElementById(‘filelist‘);//获取上传节点 13 var list = document.getElementById("list");//获取显示区域节点 14 filelist.onchange=function(e){//上传值变换时出发事件 15 var files = this.files;//文件列表 16 list.innerHTML= "";//每次上传前清除显示 17 18 //遍历文件 19 for(var i=0;i<files.length;i++){ 20 var fs = new FileReader();//创建FileReader类型，用于异步读取文件 21 fs.readAsDataURL(files[i]);//读取文件以数据URL的形式保存 22 23 fs.onload =function(){//读取文件成功触发 24 //创建图片标签并添加到指定的节点里面 25 var img = document.createElement("img"); 26 img.src = this.result; 27 list.appendChild (img) 28 } 29 } 30 } 31 32 </script> 33 34 </body> 35 </html>
原文：https://www.cnblogs.com/shengzs/p/10589535.html