现有需求:input type=file 选择一个图片之后,即时显示在页面上。
可以按如下实现:
添加onchange事件,通过js将选择的图片转换为blob格式,显示在指定位置。
<img id="img_preview"/>
<input type="file" onchange="selectImage(this)"/>
<script type="text/javascript">
var image = '';
function selectImage(file){
if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('img_preview').src = evt.target.result;
image = evt.target.result;
console.log(image)
}
reader.readAsDataURL(file.files[0]);
}
</script>
网友评论