介绍
介绍
在web开发过程中图片上传功能是很常见的，很多网站都可以实现在用户选择了一张图片之后，在没有点击“上传”按钮之前就可以立即预览选择的图片的内容。
这个设计的用户体验是非常好的，那么这个是怎么做到的呢？
图片上传预览
HTML
<div class="row"> <div class="col-6"> <div class="form-group text-center"> <img id="preview-image" src="<% $TFReq->server->BASE_URI %>images/default.jpg" style="width: 192px; height: 192px;" /> <input type="file" name="image" style="display: none;" /> </div> <div class="form-group"> <button class="btn btn-primary btn-sm form-control">上传</button> </div> </div> </div>
JS
$('#preview-image').click(function () {
var myFileIcon = $('[name="image"]');
myFileIcon.trigger('click');
});
$('[name="image"]').bind('change', function(){
var file = this.files[0];
var rdr = new FileReader();
rdr.onload = function () {
$('#preview-image').attr('src', this.result);
};
rdr.readAsDataURL(file);
});讲解
图片上传预览
HTML
这里面福哥放了一个img标签，一个上传控件，还有一个按钮。
JS
这里面两行代码。第一行用来给图片增加“点击”事件，点击图片后可以触发选择文件的事件。这样的体验会比图片下面放一个文件上传控件要好看很多（因为那个文件上传控件实在太丑了）。
第二行是实现预览的效果，通过FileReader对象的readAsDataURL方法读取图片数据，通过onload回调将图片数据复制到img表单的src属性里面，图片就显示出来了。
有些网上的教程把onload放到了readAsDataURL下面，这样是不对的。因为很有可能readAsDataURL方法瞬间完成而onload还没有执行完成，预览效果就不能用了
效果
可以看到一张图片，一个按钮，很是漂亮！
总结
好了，今天福哥带着童鞋们学会了图片上传时候的预览功能，快给自己的网站增加这个功能吧，体验非常好的哦~~