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>
- 测试:
转载自blog.51cto.com/12173069/2126324