HTML - 选择文件名后显示图像[重复]答案

【问题标题】：HTML - Display image after selecting filename [duplicate]HTML - 选择文件名后显示图像[重复]
【发布时间】：2012-09-04 08:04:09
【问题描述】：

我有一个表格可以让我使用

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

浏览并选择一个文件。

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

【问题讨论】：

多文件选择预览不上传和延迟上传anasthecoder.blogspot.in/2014/12/…

标签： html file-upload

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

Live Demo

【讨论】：

这不适用于 IE！ IE 没有 FileReader 类！
演示对我有用，但在我的网站（本地主机）中没有 - > 上传图片后未调用函数 (e) 的原因是什么？
这很好用，是否可以在多个区域显示相同的图像？例如，是否可以通过获取图像路径并将其添加到背景来将图像分配给 div 的背景： url(' IMG PATH ')
我认为您应该将功劳归功于 Ivan Baev：stackoverflow.com/a/4459419/2550529
如果用户点击（取消）并且没有选择文件，则会向控制台抛出错误。请在执行reader.readAsDataURL(input.files[0]);行之前检查（f）的值

【解决方案2】：

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

$("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/

【讨论】：

这似乎不起作用。当我运行 JSFIDDLE 测试站点时，我可以浏览并选择文件名，但没有显示任何内容。在 IE 和 Opera 中试过这个。我做错了什么？
在 JFiddle 页面上以及尝试在我自己的页面上实现它时，我都收到错误“e.originalEvent.srcElement is undefined”。当我检查 e.originalEvent 时，它只有属性：bubbles、cancelable、currentTarget、defaultPrevented、eventPhase、explicitOriginalTarget、isTrusted、originalTarget、target、timeStamp、type 和 proto。上传的文件名和一些细节在e.orginalEvent.originalTarget.files下可以找到，但是我不知道在哪里可以找到图片的来源。
我可以在同一个循环中使用 reader.result 获取文件名以分配给 img id吗？帮助将不胜感激。

【解决方案3】：

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

请记住，对于不支持此功能的浏览器，您需要另一种方法。我在this plugin 上取得了很大的成功，这让您免去了很多工作。

【讨论】：

上传文件和移动它们很容易。我的问题是在选择有效文件时显示它们。到目前为止，我还没有得到任何建议来工作。至于 HTML5 带来它，但在它变得无处不在之前，我必须编写一个适用于大多数浏览器的解决方案:-(