Question

我正在尝试自定义此按钮，用于从用户输入加载背景图像。一旦他们添加了背景图像，当他们去添加另一个图像时（即点击第二次选择），我希望当提示重新打开以添加另一个时，第一个从后台删除。

＆＃13;

$(switchBackground);
    var oFReader = new FileReader(),
        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function(oFREvent) {
        localStorage.setItem('b', oFREvent.target.result);
        switchBackground();
    };

    function switchBackground() {
      $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');    
    }

    function loadImageFile(testEl) {
      if (! testEl.files.length) { return; }
      var oFile = testEl.files[0];
      if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
      oFReader.readAsDataURL(oFile);
    }

＆＃13;

<input id="test" type="file" onchange="loadImageFile(this)" />

＆＃13;

Here is a JS Fiddle of this code.

Answer 1

最简单的方法是在同一输入中添加一个点击监听器，这意味着每当用户点击输入内的任何位置时，它都会调用以清空背景。在你的JS小提琴中，它是在身体上设置背景，所以我将在这个例子中使用它： -

function emptyBg() {
    document.body.style.backgroundImage = 'none';
}

注册点击事件（使用您使用的相同语法 - 尽管应使用JavaScript而不是HTML附加，请参阅DOM Event Listeners）。

<input id="test" type="file" onchange="loadImageFile(this)" onclick="emptyBg()"/>

设置和清除html页面的背景图像

1 个答案: