如何預覽上傳的圖像作爲div的背景圖像？

我想預覽上傳的圖像文件在div中。我已經做了一些研究，我發現這片從this post代碼，它是預覽上傳的圖像文件的代碼，但在<img>標籤：如何預覽上傳的圖像作爲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>

相關的HTML：

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

非常酷。不過，我要的是顯示上傳的圖片作爲一個div的背景圖片，其中的一個例子是這樣的：

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

我知道，從邏輯上講，我將不得不更換

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

的東西，如

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

但是如何讓圖像的路徑進入'background-image'屬性的值？

是的，我需要鏈接到這個JQuery庫嗎？

謝謝。

來源

2013-05-01 Hemkesh Molla

您可以像使用CSS文件一樣使用CSS簡寫。我提出以下建議，以避免重複和對齊問題：

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

的變化是這樣的

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

來源

2013-05-01 05:03:52 Ding

行了，謝謝。它完美的作品。在上面的問題中，我已經將div的'id'屬性改爲'class'，可能在你寫這個答案的時候。所以，而不是使用'$（'＃image'）...'，我使用'$（div.image）...'。但無論如何，:)再次感謝你。 – 2013-05-01 05:55:58

如何預覽上傳的圖像作爲div的背景圖像？

回答

相關問題