CODEWITHSUNDEEP
javascriptjqueryimagepreview
Nấm Lùn
Nấm Lùn

Reputation: 1275

How to preview image in Jquery?

I have some html elements :

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

<br>


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

Here the 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]);
    }
}

When I select an image, it will be preview immediately.

All that I want now is : at first, select an image (but not preview right now) , then click on a hyperlink, the image will be displayed. The hyperlink is something like this :

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


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

Thank you so much!

Upvotes: 4

Views: 7617

Answers (3)

Devsaiful
Devsaiful

Reputation: 157

Let's try...

image preview by jquery.

function readURL(input) {  
   $('.preview').show();
  $('#blah').hide();
  $('.preview').after('<img id="blah" src="#" alt="your image" style="display:none;"/>');
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah')
      .attr('src', e.target.result)
      .width(150)
      .height(200);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

function getPreview(){
  $('.preview').hide();
  $('#blah').show();
}
article, aside, figure, footer, header, hgroup, 
  menu, nav, section {
  display: block;
 }
 div{
 margin:20px;
 }
.preview{
 color:#FFF;
    background:#0066CC;
    padding:10px;
    text-decoration:none;
    border:1px solid #0157ad;
    border-radius:3px;
}
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Preview Image</title>

</head>
<body>
   <div>
      <input type='file' onchange="readURL(this);" />
   </div>
  <div>
  <a href="#" class="preview" onclick="getPreview();">Preview</a><br/>   
    </div>
</body>
</html>

Upvotes: 0

Ajey
Ajey

Reputation: 8222

try this

<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);
  });
});

Check out this fiddle http://jsfiddle.net/RxvLn/3/

Upvotes: 0

antileet2
antileet2

Reputation: 323

First, it's pretty bad practice to use onclick. Instead, use jQuery's event binding. Either way, this code should do the trick:

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

Upvotes: 1

Related Questions