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

Posted 2023-03-15

【中文标题】带有 localStorage 的 jQuery 图片上传器。部分工作。默认图片不显示

【英文标题】：jQuery image uploader with localStorage. Partially working. Default image not showing

【发布时间】：2015-04-23 18:55:38

【问题描述】：

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

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

我具备上传新图像/徽标和替换默认值的基础知识。但是，我们正在使用“开箱即用”默认徽标预先设置控制面板标题。出于某种原因，首次加载页面时不会显示默认徽标。您目前得到一个损坏的图像图标。上传新图像后，它会替换标题徽标并将当前选择保留在管理小部件中。

如果您刷新页面，它会从 localStorage 中调用它，它工作正常，但如果您重置，您会注意到预播徽标没有出现。

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);
);

不知道我哪里出错了。请参阅小提琴的工作模型

更新：这已解决，我将下面的小提琴更新为工作版本，以防它帮助其他人。

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

【参考方案1】：

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

【讨论】：

感谢 Matho 的指导。此问题已解决。