Hintergrundbild der HTML-Seite einstellen und löschen

Question

Ich versuche, diese Schaltfläche anzupassen, die ein Hintergrundbild aus der Benutzereingabe lädt. Sobald sie ein Hintergrundbild hinzugefügt haben, wenn sie gehen, um ein anderes Bild hinzuzufügen (d. H. Klicken Sie auf Choose the second time), möchte ich die erste aus dem Hintergrund entfernen, wenn die Eingabeaufforderung erneut geöffnet wird, um eine weitere hinzuzufügen.

$(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)" />

Here is a JS Fiddle of this code.

Answer 1

Der einfachste Weg ist es, ein Klick Zuhörer an den gleichen Eingang hinzuzufügen, was bedeutet, wenn der Benutzer eine beliebige Stelle innerhalb der Eingabe klickt rufen sie den Hintergrund zu leeren. In Ihrem JS Fiddle, wird die Einstellung der Hintergrund auf den Körper, so dass ich mit, dass in diesem Beispiel gehen: -

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

das Click-Ereignis registrieren (die gleiche Syntax Sie verwendet - auch wenn dies angebracht werden sollte Verwenden Sie JavaScript und nicht HTML, siehe DOM Event Listeners).

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