javascript实现图片实时预览的两种方式
服务端
2018-06-08 12:17:14
阅读次数: 8
一、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>
- 测试:
![javascript实现图片实时预览的两种方式](http://i2.51cto.com/images/blog/201806/08/44ab8995c20251c17e28a2055fd5b870.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
转载自blog.51cto.com/12173069/2126324