HTML - 选择文件名后显示图像

小编典典

HTML - 选择文件名后显示图像

all

我有一个表格可以让我

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

浏览并选择文件。

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

阅读 67

2022-08-05

共1个答案

小编典典

干得好：

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

现场演示

2022-08-05