介绍

介绍

在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还没有执行完成，预览效果就不能用了

效果

可以看到一张图片，一个按钮，很是漂亮！

总结

好了，今天福哥带着童鞋们学会了图片上传时候的预览功能，快给自己的网站增加这个功能吧，体验非常好的哦~~