同福

实现Html文件上传控件选择图片后的预览功能【20210329】

介绍

介绍

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

效果

可以看到一张图片,一个按钮,很是漂亮!

79f34399ad0bf4a2.jpg

总结

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