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 に答える