javascript实现图片实时预览的两种方式
一、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>
- 测试: