html的createObjectURL方法:
<input type="file" onchange="upload(event)" filetype="image/*"/> <img src="" alt="" id="preview"> <script> function upload(event){ var imgObj = event.target.files[0]; var img=window.URL.createObjectURL(imgObj) document.getElementById("preview").setAttribute("src",img); }; </script>html的new FileReader().readAsDataURL方法:
<input type="file" onchange="upload(event)" filetype="image/*"/> <img src="" alt="" id="preview"> <script> function upload(event){ var imgObj = event.target.files[0]; const reader = new FileReader() reader.readAsDataURL(imgObj) reader.onloadend = function(r) { document.getElementById("preview").setAttribute("src",r.currentTarget.result); } }; </script>vue的new FileReader().readAsDataURL方法:
<div id="rootVue"> <input type="file" @change="upload($event)"> <img :src="src"> </div> <script> new Vue({ el:'#rootVue', data:{ src:'', }, methods:{ upload:function(e){ var that = this; var imgObj = e.target.files[0]; const reader = new FileReader() reader.readAsDataURL(imgObj) reader.onloadend = function(r) { that.src = r.currentTarget.result; } } } }) </script>vue的createObjectURL方法:
<div id="rootVue"> <input type="file" @change="upload($event)"> <img :src="src"> </div> <script> new Vue({ el:'#rootVue', data:{ src:'', }, methods:{ upload:function(e){ var that = this; var imgObj = e.target.files[0]; var img=window.URL.createObjectURL(imgObj); this.src = img; } } }) </script>