如何在客戶端預加載和顯示圖像？

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”），我只能獲取圖像名稱，而不能獲取路徑名。

怎么做？

Answer 1

從document.getElementById（“ logofile”），我只能獲取圖像名稱，而不能獲取路徑名。

那是因為您正在獲取DOM中的元素，該元素不知道文件在系統上的位置，它只知道現在有一個文件可供DOM查看（它所在的位置現在不相關） ）。

您使問題復雜化了。

您無需在用戶系統上尋找圖像即可顯示它。

簡化您的問題，並像其他在stackoverflow上顯示的那樣進行操作。

解決方案：

這個答案： https : //stackoverflow.com/a/27165977/1026898正是您想要的。

1. 您將像現在一樣接受表單中的文件。
2. 然后，您可以使用javascript來檢測用戶何時使用圖像更新了表單。
3. 然后，將圖像標簽的來源（將顯示“預覽”的圖像元素，在本例中為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 ...）