上传完图片之后，让被选中的图片直接显示在html页面上

在做上传文件功能的时候，想做一个上传完图片直接显示在屏幕上的效果

html代码

通过给input添加一个onchange事件来绑定js方法

<div class="control-group">
 <label class="control-label">上传封面 :</label>
 <div class="controls">
 	<!--这是一个display:none的div，不可见，在input中的值更改后会加载更改的图片，并显示在页面上-->
     <div id="display_none"></div>
     <!--在这里注意添加一个onchange事件，调用js里写的方法-->
     <input type="file" name="pic" class="form-control-file" id="exampleFormControlFile1" onchange="show(this)"/>
 </div>
</div>

js代码

<script th:src="@{/js/jquery.min.js}"></script>
<script>
   function show(f){
       var rd = new FileReader();//创建文件读取对象
       var files = f.files[0];//获取file组件中的文件
       rd.readAsDataURL(files);//文件读取装换为base64类型
       //显示在页面上，取消display:none;
       $("#display_none").show();
       rd.onloadend = function(e) {
           //加载完毕之后，在div中添加一个元素
           $("#display_none").html("<img src='"+this.result+"' width=\"90\" height=\"128\"/>")
       }
   }
</script>