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

一、FileReader（base64）：

1. 代码：

   <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>

1. 二、window.URL.createObjectURL（blob）：

2. 代码：

   <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>