HTML使用imput标签,file类型上传一张图片然后预览。
1、将打开的图片显示在div元素中。
<script>
var getUserPhoto = document.getElementById("input_img");
getUserPhoto.onchange = function () {
var file = this.files;
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function () {
var image = document.createElement("img");
image.width = "400";
image.src = reader.result;
var showPicture = document.getElementById("show_img");
showPicture.append(image);
};
};
</script>
......
<input type="file" name="" id="input_img" />
<div id="show_img"></div>
2、 将打开的图片作为img元素的src显示。
<script>
var getUserPhoto = document.getElementById("input_img");
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>
......
<input type="file" name="" id="input_img" />
<img id="show_img" src="">