当前位置 博文首页 > 范栩的博客：上传完图片之后，让被选中的图片直接显示在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>
<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>
