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>

输入文本，删除伪路径，输入文本输出

1 个答案: