Come visualizzare in anteprima un'immagine caricata come immagine di sfondo di un div?

Desidero visualizzare l'anteprima di un file di immagine caricato in un div. Ho fatto un po 'di ricerca e ho trovato questo pezzo di codice da this post, è il codice per visualizzare l'anteprima di un file immagine caricata, ma in un <img> tag:Come visualizzare in anteprima un'immagine caricata come immagine di sfondo di un div?

<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>

L'HTML associato:

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

Molto interessante. Tuttavia, quello che voglio è quello di visualizzare l'immagine caricata come l'immagine di un div fondo, di cui un esempio sarebbe come questo:

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

so che, logicamente, avrei dovuto sostituire

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

con qualcosa di simile

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

Ma come trasformare il percorso dell'immagine nel valore della proprietà 'background-image'?

E sì, ho bisogno di collegarmi alla libreria JQuery per questo?

Grazie.

fonte

2013-05-01 Hemkesh Molla

È possibile utilizzare la stenografia CSS proprio come in un file CSS. Vi consiglio i seguenti per evitare problemi di ripetizione e di allineamento:

<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>

Il cambiamento è la linea come questa

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

fonte

2013-05-01 05:03:52 Ding

Grazie. Funziona perfettamente. Solo per citare, nella mia domanda di cui sopra, ho cambiato l'attributo 'id' di div a 'class' invece, probabilmente mentre stavi scrivendo questa risposta. Quindi, invece di usare '$ (' # image ') ...', sto usando '$ (div.image) ...'. Ma comunque, grazie ancora. –

Come visualizzare in anteprima un'immagine caricata come immagine di sfondo di un div?

risposta

Problemi correlati