Jak wyświetlić podgląd przesłanego obrazu jako obrazu tła elementu div?

Chcę wyświetlić podgląd przesłanego pliku obrazu w pliku div. Zrobiłem trochę badań i znalazłem ten kawałek kodu z this post, to kod do podglądu przesłanego pliku obrazu, ale w <img> tagu:Jak wyświetlić podgląd przesłanego obrazu jako obrazu tła elementu 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>

Związane HTML:

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

Bardzo fajnie. Jednak to, co chcę jest wyświetlanie przesłanego obrazu jako obrazu tła div, czego przykładem byłoby tak:

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

Wiem, że logicznie, to musiałby zastąpić

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

z czymś

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

Ale jak zmienić ścieżkę obrazu w wartość właściwości "obraz tła"?

A tak, czy muszę do tego celu dodać łącze do biblioteki JQuery?

Dziękuję.

Źródło

2013-05-01 Hemkesh Molla

Można użyć skrótu CSS, tak jak w pliku CSS. Polecam następujące czynności, aby uniknąć powtarzania i wyrównanie problemy:

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

Zmiana jest linia jak ten

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

Źródło

2013-05-01 05:03:52 Ding

Dziękuję. Działa idealnie. Wspomnę tylko, że w powyższym pytaniu zmieniłem atrybut "id" div na "class", prawdopodobnie podczas pisania tej odpowiedzi. Zamiast "$ (" # image ") ..." używam "$ (div.image) ...". Ale tak czy owak, dziękuję jeszcze raz. –

Jak wyświetlić podgląd przesłanego obrazu jako obrazu tła elementu div?

Odpowiedz

Powiązane problemy