Question

在大量类似的问题中，我无法真正找到我需要的东西，尽管它看起来很常见......

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

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

<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（＆＃34; logofile＆＃34;），我只能获取图像名称，而不是路径名。

怎么做？

Answer 1

从document.getElementById（＆＃34; logofile＆＃34;），我只能获取图像名称，而不是路径名。

那是因为你抓住了DOM中的元素，该元素不知道文件在系统中的位置，它只知道DOM现在有一个文件可以查看（它现在在哪里并不相关。）

你的问题太复杂了。

您无需在用户系统上查找图像即可显示该图像。

简化您的问题并执行其他人在stackoverflow上显示的内容。

解决方案：

这个回答：https://stackoverflow.com/a/27165977/1026898完全符合您的要求。

您将接受表格中的文件。
然后使用javascript检测用户何时使用图像更新表单。
然后设置一个图片代码的来源（一个图像元素将显示＆＃39;预览＆＃39;，在您的情况下，ID为image_to_display的元素。您设置这与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>

Answer 2

您将无法获取路径名称，因为它是一件事的隐私问题，并且由于交叉原始规则，您无法将其分配给<img src。你需要考虑使用FileReader，虽然它需要相对现代的浏览器（Chrome，Firefox，IE 10 ......）

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

2 个答案: