html sayfasının arka plan görüntüsünü ayarlayın ve temizleyin

Question

Kullanıcı girişinden bir arka plan resmi yükleyen bu düğmeyi özelleştirmeye çalışıyorum. Bir arka plan resmi eklediklerinde, başka bir resim eklemek için gittiklerinde (yani ikinci kez seç'i tıklattıkları zaman), başka bir tane eklemek için istemi yeniden açıldığında ilkinin arka plandan kaldırılmasını istiyorum.

Here is a JS Fiddle of this code.

Answer 1

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

basit yolu kullanıcı herhangi bir yerde arka plan boşaltmak arayacak girdi içeriye tıkladığında, yani aynı girişe bir tıklama işleyicisi eklemektir. sizin JS Fiddle, bu gövde üzerinde arka plan ayarlama, bu yüzden bu örnekte bununla gidersiniz: -

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

tıklama etkinliğini Kayıt (kullandığınız sözdizimi kullanılarak - Bu eklenmelidir rağmen HTML ve JavaScript kullanmadan, bkz. DOM Event Listeners).

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