177

我有一个表格可以让我

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

浏览并选择文件。

我想要做的是在选择图像后立即显示该图像。这是在表单上的“提交”按钮被按下之前，所以图像几乎肯定位于客户端。这可以做到吗？

4

3 回答 3

336

干得好：

HTML

<!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>JS Bin</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
      article,
      aside,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }
    </style>
  </head>
  <body>
    <input type="file" onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
  </body>
</html>

脚本：

function readURL(input) {
  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]);
  }
}

现场演示

于 2012-09-11T11:48:16.550 回答
36

您可以使用以下代码实现此目的：

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});

演示：http: //jsfiddle.net/ugPDx/

于 2012-09-11T11:45:23.143 回答
4

这可以使用 HTML5 完成，但仅适用于支持它的浏览器。这是一个例子。

请记住，对于不支持此功能的浏览器，您需要另一种方法。我在这个插件上取得了很大的成功，它可以让你完成很多工作。

于 2012-09-11T11:47:08.143 回答