使用js和jquery实现点击图片上传及预览

最新推荐文章于 2023-09-02 23:58:34 发布

转载最新推荐文章于 2023-09-02 23:58:34 发布 · 6.4k 阅读

文章标签：

#jquery #js #图片 #预览

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的上传头像功能实现方法，通过使用JavaScript操作DOM元素来触发文件选择框，并预览所选图片。

//上传头像
    $(".avator-btn-fake").click(function(){
        $("#upload").click();
    });
    $("#upload").change(function(){
        var file = this.files[0] ? this.files[0] : null; //不晓得这里换成$(this)为什么不行
        if(null == file){
            return false;
        }
        var file_reader = new FileReader();
        file_reader.onload = (function(){
            var image_url = this.result;        // 这是图片的路径
            $("#js-portrait").attr('src', image_url);
        });
        file_reader.readAsDataURL(file);
    });