如何在 Jquery 中预览图像？答案

【问题标题】：How to preview image in Jquery?如何在 Jquery 中预览图像？
【发布时间】：2011-09-19 10:29:41
【问题描述】：

我有一些 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)
}

非常感谢！

【问题讨论】：

标签： javascript jquery image preview

【解决方案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
        }
    }
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

我们试试……

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>

【讨论】：