javascript实现图片实时预览的两种方式

2025-02-20 技术教程

一、FileReader（base64）：代码：

<input id="file" type="file"><img id="img" alt=""><script>var file = document.getElementById('file')var img = document.getElementById('img')file.addEventListener('change',function(){ var obj = file.files[0] var reader = new FileReader(); reader.readAsDataURL(obj); reader.onloadend = function() { img.setAttribute('src',reader.result); }})</script>测试：
二、window.URL.createObjectURL（blob）：代码：

<input id="file" type="file"><img id="img" alt=""><script>var file = document.getElementById('file')var img = document.getElementById('img')file.addEventListener('change',function(){ var obj = file.files[0] var src = window.URL.createObjectURL(obj) img.setAttribute('src',src);})</script>测试：