如何在Jquery中預覽圖像？

Question

我有一些HTML元素：

<img id="preview_image" alt="" src="" width="100px" height="120px"> 

<br> 


<input type="file" name="user_image" id="user_image" onchange="preview(this);"> 

這裏的JS：

function preview(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#preview_image') 
       .attr('src', e.target.result) 
       .width(100) 
       .height(120); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

當我選擇圖像時，它會立即預覽。

現在我想要的是：首先，選擇一個圖像（但不是現在預覽），然後點擊超鏈接，圖像將被顯示。超鏈接是這樣的：

<a href="javascript:void(0)" onclick="preview2()">Click to preview</a> 


preview2 = function(){ 
    //what should I do here (using Jquery) 
} 

非常感謝！

Answer 1

首先，使用onclick的做法很不好。相反，使用jQuery的事件綁定。無論哪種方式，這個代碼應該做的伎倆：

<a id="previewButton">Click here to preview</a> <!-- initially, the button is disabled --> 

<script type="text/javascript"> 
function preview (input) 
{ 
    $("#previewButton").hide(); // don't show preview until file loaded 
    // implementation code 

    reader.onload = function (e) { 
     $("#previewButton").show() // show the button 
          .click (function() { 
      $("#preview_image").attr() // your old loader code 
     } 
    } 
} 

Answer 2

試試這個

<div class="upload-preview"> 
    <img /> 
</div> 
<input class="file" name="logo" type="file"> 

$(document).ready(function(){ 
var preview = $(".upload-preview img"); 

$(".file").change(function(event){ 
    var input = $(event.currentTarget); 
    var file = input[0].files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e){ 
     image_base64 = e.target.result; 
     preview.attr("src", image_base64); 
    }; 
    reader.readAsDataURL(file); 
    }); 
}); 

看看這個小提琴 http://jsfiddle.net/RxvLn/3/