如何在客户端预加载并显示图像？

Question

在大量类似的问题中，尽管这似乎很常见，但我仍然无法找到我需要的内容...

我有一个用户资料表单。因此，用户可以上传头像。它使用一个常见的“浏览...”按钮，但这个按钮将在下一次提交时通知服务器。

因此，我想检索本地图像文件名和目录路径，以便立即显示所选图像。

<img src="" id="image_to_display" class="img-responsive" alt=""/>
<form enctype="multipart/form-data" method="post" accept-charset="utf-8" role="form" action="/pros/sites/add">
    <input class="form-control"  value="POST" type="hidden" name="_method" id="_method" />
        <fieldset>
            <div class="form-group file">
               <input type="file" name="logofile" onchange="loadImg('logofile');" id="logofile">
            </div>

         .....
         </fieldset>                            
      .....
 </form>

从document.getElementById("logofile")，我只能获得图片名称，而无法获取路径。

有什么方法可以做到？

- fralbo

---

这里有一个很好的解决方案。非常简单明了。 - Todd

Answer 1

“从document.getElementById（“logofile”）中，我只能获取图像名称，而无法获取路径名。”这是因为您正在DOM中获取元素，该元素不知道文件在系统上的位置，它只知道现在DOM可以查看文件（其位置现在并不重要）。您正在使问题过于复杂。您不需要在用户系统上查找图像以显示它。简化您的问题，并执行其他人在stackoverflow上展示的操作。解决方案：此答案：https://dev59.com/VW855IYBdhLWcg3wPBtx#27165977正是您想要的。

您将文件作为现在的表单接受。 然后，您使用JavaScript检测用户何时使用图像更新了表单。 然后，您将一个图像标记的源（将要显示“预览”的图像元素，在您的情况下具有image_to_display id的元素。您使用element.src设置这个元素）设置为在表单中选择的图像（即图像本身）。

使用您的代码：

<img src="" id="image_to_display" class="img-responsive" alt=""/>
<form enctype="multipart/form-data" method="post" accept-charset="utf-8" role="form" action="/pros/sites/add">
    <input class="form-control"  value="POST" name="_method" id="_method" />
        <fieldset>
            <div class="form-group file">
               <input type="file" name="logofile" id="logofile" onchange="loadFile(event)">
            </div>

         .....
         </fieldset>                            
      .....
 </form>
 <script>
  var loadFile = function(event) {
    var output = document.getElementById('image_to_display');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

- Ecnalyr

---

太好了@Ecnalyr，看起来你给我的代码并不完全符合我的要求，因为它不能立即显示图像，但是使用FileReader.readAsDataURL()的第二个代码片段可以实现我想要的效果。非常感谢。 - fralbo

Answer 2

你无法获取路径名称，因为这是一个隐私问题，而且由于跨域规则，你也无法将其分配给<img src。你需要研究使用FileReader，尽管它需要相对较新的浏览器（Chrome、Firefox、IE 10...）

- Duncan Smart