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="">