當圖像被選中時顯示預覽div

我有一個圖像預覽div用於顯示所選圖像的縮略圖。到現在爲止它工作正常。但是我希望這個div在頁面加載時隱藏，當用戶選擇要上傳的圖片時可見。繼承人我的代碼結構：當圖像被選中時顯示預覽div

<div class="fileinput fileinput-new" data-provides="fileinput"> 
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px; display:none"></div> #This is the div for previewing images 
<div> 
<span class="btn btn-info btn-file"> 
<span class="fileinput-new">Select image</span> 
<span class="fileinput-exists">Change</span> 
<input type="file" name=""></span>

繼承人我的jquery：（ITS我第一次用jQuery）

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".btn btn-info btn-file").click(function(){ 
     $(".fileinput-preview thumbnail").show(); 
     }); 
}); 
</script>

的jsfiddlehttp://jsfiddle.net/3717h5mg/1/

這不是工作，因爲我以爲它會做。

來源

2014-11-25 catastropic

'$（「btn.btn-info.btn文件」）'和'$ （「.fileinput-preview.thumbnail」）。show（）;'刪除類選擇器之間的空間。 – Abhitalks 2014-11-25 07:30:16

這沒有幫助！ – catastropic 2014-11-25 07:35:00

爲什麼不呢？看到這裏：http://jsfiddle.net/abhitalks/354k5wh6/ – Abhitalks 2014-11-25 07:39:16

嘗試

$(document).ready(function(){ 
    $(".btn.btn-info.btn-file").change(function(){ 
     $(".fileinput-preview.thumbnail").show(); 
    }); 
});

注意：（。），你錯過了點選擇在點擊$（「BTN BTN-信息BTN-文件」），也縮略圖類

DEMO

來源

2014-11-25 07:28:19 Balachandran

這沒有做到這一點！我很想知道是否有其他方法可以實現這一目標。謝謝你的回答！ – catastropic 2014-11-25 07:33:39

您可以顯示文件上的縮略圖更改事件

$(document).ready(function(){ 
$('input[type="file"]').change(function() { 
    $(".fileinput-preview.thumbnail").show(); 
}); 
});

來源

2014-11-25 07:37:31 anpsmn

另一個很好的答案。這也工作了！謝謝..：） – catastropic 2014-11-25 07:46:22

Bala和anspsmn明確表示：處理'onchange'事件。這回答你的問題。但是，也許一個jquery插件可以讓你看起來更簡單的選項來做你正在做的事情。我開發了一個可以根據當前需求輕鬆定製的Jquery插件。您可以選擇圖像（或任何其他文件類型），預覽它們，剪裁它們（如果需要的話），並輕鬆上傳它們。另外，您可以爲文件設置最大KB，拖放文件等，以及樣式按鈕。

下面的例子：

$('#your-input-file').customFile({ 
    type : 'image', 
    maxKBperFile : 500, 
    maxFiles : 1 
});

在這裏，你會發現下載鏈接和文檔：Jquery Custom Input File

來源

2014-11-25 21:34:17 Angel

當圖像被選中時顯示預覽div

回答

相關問題