输入文本，带假路径，输出输入文本

Question

所以我最近为输入文件表单"制作"了一个自定义按钮(从指南中获取了一些片段)，但在右侧也有一个小文本显示。现在，在chrome中，作为安全预防措施，他们删除了图像的路径-这显然是合乎逻辑的。但是，也有可能删除这些标记，只输出文件名。

现在理论上我知道怎么做了，但我不知道怎么做。对懂这个的人来说可能很容易，但我不知道。如果你知道并告诉我，那就太棒了!

我想这是剥离的东西

 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;
};

Answer 1

您是对的，您可以使用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>