实现图片实时预览的两种方法(有兼容性问题,最好通过后台)
一 ,通过
<body> <input type="file" id="file" > <div id="box"></div> <script> var file = document.getElementById("file"); var box = document.getElementById("box"); file.addEventListener("change", function () { console.dir(file); //files:里面存储了所有上传的文件 //这个data就是我们上传的那个文件 var data = file.files[0]; //1. 创建一个文件读取器 var fr = new FileReader(); //2. 让文件读取器读取整个文件 fr.readAsDataURL(data); //3. 等待文件读取完 //onload:文件读取完成后,就会触发 fr.onload = function () { var img = document.createElement("img"); //当文件读取完成,可以通过result属性获取结果 img.src = fr.result; box.innerHTML = ""; box.appendChild(img); } }); </script> </body>
二,通过URL.createObjectURL
<body> <input type="file"> <img src="" alt=""> <script> var fileInp = document.querySelector("input"); var img = document.querySelector("img"); // 监听文件选中 fileInp.onchange = function() { // 获取文件对象 (图片) var file = fileInp.files[0]; // URL.createObjectURL(文件对象) 可以创建一个路径, 指向指定的文件对象 // 返回值: 就是文件路径 var imgUrl = URL.createObjectURL( file ); // 设置给 img img.src = imgUrl; } </script> </body>