輸入文本，帶狀假路徑，輸入文本輸出

所以我最近「製作」了一個輸入文件窗體的自定義按鈕，但也有一個右側的文本顯示器。現在，作爲一種安全防範措施，他們已經將圖像的路徑移除了 - 這顯然是合乎邏輯的。但是，可以刪除這些標籤並輸出文件名。輸入文本，帶狀假路徑，輸入文本輸出

現在我有一個線索如何做到這一點，理論上，但我不知道如何實際做到這一點。知道這件事的人可能很容易，但我不知道。如果你知道並告訴我，那會很棒！

這是該剝離的事情我想會的工作

file = path.split('\\').pop();

http://i.gyazo.com/ccccb44e7550475acb0cbccf4de20d0e.png

這是HTML

<table style="width:100%; border-collapse: collapse;"> 
    <td style="width: 18%"> 
     <label class="fileUpload"> 
      <input id="uploadBtn" type="file" class="upload" /> 
      <div class="button-speed-menu-browse"> 
       BROWSE.. 
      </div> 
     </label> 
    </td> 
    <td> 
     <input id="uploadFile" class="field-path-input" placeholder="Choose PNG file" disabled/> 
    </td> 
</table>

現在的JavaScript的（這是在底部）。

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
};

來源

2015-05-21 Viktor J.

所以你想只顯示文件名獲得圖像的名字？而不是'fakename/filename.doc' – Saqueib

@SAQUEIB這是正確的 –

你是對的，你可以使用split()

試試吧

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value.split("\\").pop(); 
};

<table style="width:100%; border-collapse: collapse;"> 
    <td style="width: 18%"> 
    <label class="fileUpload"> 
     <input id="uploadBtn" type="file" class="upload" /> 
     <div class="button-speed-menu-browse"> 
     BROWSE.. 
     </div> 
    </label> 
    </td> 
    <td> 
    <input id="uploadFile" class="field-path-input" placeholder="Choose PNG file" disabled/> 
    </td> 
</table>

來源

2015-05-21 06:41:51 Saqueib

輸入文本，帶狀假路徑，輸入文本輸出

回答

相關問題