HTML使用input file上传图片并显示

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