HTML网站上传图片的同时,将图片显示在页面里面
具体代码
<input type="file" class="form-control" name="file" id="input_img">
<img id="show_img" src="" style="width: 150px;height: 100px">
<script>
var getUserPhoto = document.getElementById("input_img");
alert(getUserPhoto);
getUserPhoto.onchange = function ()
{
var file = this.files;
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function ()
{
var image = document.getElementById("show_img");
image.src = reader.result;
};
};
</script>
效果展示
完美实现!
原文来自:这里