10秒后从输入按钮清除背景图像

I am using this code to set a background image to my page for 10 seconds after that image is cleared but when i reload the page i have the last image used on the background.

我正在使用此代码将背景图像设置为我的页面10秒后清除该图像,但是当我重新加载页面时,我在背景上使用了最后一个图像。

How to clear the image once and for all?

如何一劳永逸地清除图像?

Another problem is that i am using this background button in a drawing web app and sometimes after changing the background the app freezes.

另一个问题是我在绘图Web应用程序中使用此背景按钮,有时在更改背景后应用程序冻结。

$(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);
}

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

demo

2 个解决方案

#1

if you need to clear background after 10 second so please change function as per below.

如果您需要在10秒后清除背景,请按以下方式更改功能。

var obj;
function switchBackground() {
  $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');   
  clearTimeout(obj);
  obj = setTimeout(function(){
              $('body').css('background-image','none');   
            }, 10000);
}

and if you also want to remove image in local storage after 10 second the so delete jstorage script in setTimeout function

如果你还想在10秒后删除本地存储中的图像,那么在setTimeout函数中删除jstorage脚本

#2

localStorage.clear();

i think it solved my problem

我认为它解决了我的问题

#1