迷之问题——<input type='file'>动态赋值base64图片数据

一名苦逼初三作业党

目前开发的项目是一个博客集群,现在在整头像上传这一块

如题,我这边已经确定我获取到了base64编码的图片文件,准备赋值到img标签的src上,

用JQ的attr和原生js的document赋值都是不行的,但是console.log打印出来的base64手动复制粘贴到src,图片是可以显示的。。。

注:JQ和原生js赋值后的src为空字符串


模板html:

<script type="text/template" id="userHtml">
    <a class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#user_info'}">
            <i class='mdui-icon'><img id='headimg' style='width: 24px' /></i>
    </a>
    <ul class="mdui-menu mdui-menu-cascade" id="user_info">
        <li class="mdui-menu-item">
            <i class='mdui-icon'><img id='headimg' style='width: 64px' /></i>
        </li>
        <li class="mdui-divider"></li>
        <li class="mdui-menu-item">
            <a href="#settimg" class="mdui-ripple" onclick="Update_Page('editHeadimg.html', false, true)">个人信息 Setting</a>
            <input type="file" id="uploadImg" accept=".jpg,.jpeg,.png,.gif,.bmp" onchange="uploadImg()">
        </li>
        <li class="mdui-divider"></li>
        <li class="mdui-menu-item">
            <a class="mdui-ripple">登出 Sign out<i class="mdui-menu-item-icon mdui-icon material-icons" style='float: right; margin: 4px'></i></a>
        </li>
    </ul>
</script>

js片段:

function uploadImg() {
    var fileImg = $('#uploadImg');
    var data;
    if (fileImg.val()) {
        if (fileImg.length = 1) {
            data = fileImg[0].files[0];
            console.log(data)
            // console.log(fileImg[0].files[0]);
            if (isImage.test(data.type)) {
                Update_Page('editHeadimg.html', false, true);
                var reader = new FileReader();
                var imgFile;
                reader.onload = function (e) {
                    imgFile = e.target.result;
                    // console.log(imgFile);
                    console.log($('#editShow'));
                    $('#editShow').attr('src', imgFile);
                };
                reader.readAsDataURL(data);
                // console.log(imgFile)
                // $('#editShow').attr('src', imgFile);
            }
            else {
                mdui.snackbar({
                    message: '似乎不能提交除图片外的文件呢~(;д;)',
                    position: 'bottom'
                });
            };
        }
        else {
            mdui.snackbar({
                message: "一次只能选择一张图片(〃'▽'〃)",
                position: 'bottom'
            });
        };
    }
    else {
        mdui.snackbar({
            message: '选择的文件不能为空ヽ( ̄▽ ̄)ノ',
            position: 'bottom'
        });
    };
    // console.log(data);
};

搞了5天了,毫无头绪,同样的方法重新写一个demo就可以赋值了。。

共 1 个回答

哦我亲爱的达瓦里氏,你是不是可以试一试动态生成img标签呢