jQuery 带有 localStorage 的图片上传器。部分工作。默认图片不显示

Question

我正在开发公司控制面板的管理功能。我要创建的小部件是供管理员用他们自己的公司徽标替换控制面板上的默认徽标。

我正在使用 localStorage 进行概念验证，但它会在生产时保存到数据库和 CMS 中。

我有上传新 image/logo 和替换默认值的基础知识。但是，我们 pre-seeding 控制面板 header 带有 "out of box" 默认徽标。出于某种原因，默认徽标在首次加载页面时不显示。你目前得到一个破损的图像图标。上传新图片后，它会替换 header 徽标并在管理小部件中保留当前选择。

如果您刷新页面，它会从 localStorage 调用它，它工作正常，但如果您重置，您会注意到 pre-seeded 徽标不会出现。

var img = new Image();
img.src = localStorage.theImage;

$('.logoArea').html(img);
$("body").on("change", ".uploadLogo", function() {
    var fileInput = $(this)[0];
    var file = fileInput.files[0];

    var reader = new FileReader();
    reader.onload = function(e) {
        // CREATE A NEW IMAGE
        var img = new Image();

        img.src = reader.result;
        localStorage.theImage = reader.result; // STORE IMAGE IN LOCAL STORAGE
        $(".logoArea").html(img);
    }
    reader.readAsDataURL(file);
});

不确定我哪里出错了。请参阅 fiddle 了解工作模型

Update: This was resolved and I updated fiddle below to working version in case it helps anyone else out.

https://jsfiddle.net/evmcatj1/7/

Answer 1

第一次加载时 localStorage.theImage; 是 undefined 你应该使用默认图片以防用户第一次打开页面

jQuery 带有 localStorage 的图片上传器。部分工作。默认图片不显示

jQuery image uploader with localStorage. Partially working. Default image not showing

javascript

jquery

local-storage