Как просмотреть изображение в 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/