用fileReader ,ajax 上传图片并实时显示

最新推荐文章于 2025-07-02 08:00:00 发布

yournevermore

最新推荐文章于 2025-07-02 08:00:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/yournevermore/article/details/84482485

前端专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个使用JavaScript和FileReader API实现的文件上传功能，该功能能够读取用户选择的图片文件，并将其转换为DataURL格式，以便在网页上进行预览。同时，通过AJAX调用将图片数据发送到服务器端进行存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function uploadimg(source){
    var file = source.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload= function ( event ) {
            avatar = event.target.result;
            console.log(typeof(avatar));
            $.ajax({
                url: '/upload_photo',
                type: "post",
                data: {'photo': avatar},
                success: function (rs) {
                    var isOpen = true;
                    data=JSON.parse(rs);
                    if(data['code']==0){
                        console.info(data['msg']);
                        $.each($('.active img'),function(i,o){
                            if($(o).attr("src") == "/static/image/nopicture.png"){
                                $(o).attr("src",'/static/tmp_img/'+data['msg']);
                                return false;
                            }
                        });
                    }
                }
            });
        };
        reader.readAsDataURL(file);
     };
};