Wie zeige ich ein hochgeladenes Bild als Hintergrundbild eines div an?

Ich möchte eine hochgeladene Bilddatei in einem div anzeigen. Ich habe ein wenig Forschung getan, und ich habe dieses Stück Code aus this post gefunden, es ist der Code eine hochgeladenes Bild-Datei in der Vorschau anzeigen, aber in einem <img> tag:Wie zeige ich ein hochgeladenes Bild als Hintergrundbild eines div an?

<script type="text/javascript"> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>

Die zugehörige HTML:

<body> 
    <form id="form1" runat="server"> 
     <input type='file' onchange="readURL(this);" /> 
     <img id="blah" src="#" alt="your image" /> 
    </form> 
</body>

Sehr cool. Doch was ich will, ist das hochgeladene Bild als Hintergrundbild eines div angezeigt werden, von denen ein Beispiel so sein würde:

<div class="image" style="background-image:url('');"></div>

Ich weiß, dass, logisch, würde ich ersetzen müssen

$('#blah').attr('src', e.target.result);

mit so etwas wie

$('div.image').attr('style', e.target.result);.

Aber wie wird der Pfad des Bildes in den Wert der Eigenschaft 'background-image' übernommen?

Und ja, muss ich für die JQuery-Bibliothek verknüpfen?

Vielen Dank.

Quelle

2013-05-01 Hemkesh Molla

Sie könnten CSS-Kurzschrift wie in einer CSS-Datei verwenden. Ich empfehle die Wiederholung und Ausrichtungsprobleme zu vermeiden, folgende:

<script type="text/javascript"> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#objectID').css('background', 'transparent url('+e.target.result +') left top no-repeat'); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script>

Die Änderung der Zeile wie diese

ist

$('#objectID').css('background', 'transparent url('+e.target.result +') left top no-repeat');

Quelle

2013-05-01 05:03:52 Ding

Danke. Es funktioniert perfekt. Um nur zu erwähnen, habe ich in der obigen Frage das "id" -Attribut der div stattdessen in "class" geändert, wahrscheinlich während Sie diese Antwort geschrieben haben. Anstatt '$ (' # image ') ...' zu verwenden, benutze ich '$ (div.image) ...'. Aber trotzdem, :) danke nochmal. –

Wie zeige ich ein hochgeladenes Bild als Hintergrundbild eines div an?

Antwort

Verwandte Themen