Question

<input title="Browse" type="file" name="file" onchange="this.parentNode.nextSibling.value = this.value.split('\\').pop().split('/').pop()">

Browse

从上面的代码我上传文件和上传的文件工作正常，但是当我点击上传按钮时，当前浏览的文件名没有显示在我提供的文本框中。

Answer 1

由于您将在单独的文本框中显示文件名，因此不会使用默认文件名显示。最好创建一个button并让它使用onclick调用文件上传。之后，您可以获取文件名并将其分配给您使用下面的javascript创建的文本框。

的javascript：

var filename;
document.getElementById('fileInput').onchange = function () {
filename = this.value.split(String.fromCharCode(92));
document.getElementById("fileText").value = filename[filename.length-1];
};

HTML：

<label for="file" class="input input-file">   
<input type="text" id="fileText" placeholder="Upload Students file"   readonly="" />
<input type="file" id="fileInput" style="display: none;"  />
<input type="button" value="Choose File"   onclick="document.getElementById('fileInput').click();" />
</label>

我在这里为您做了一个快速演示：http://jsfiddle.net/x9L8etfg/

希望这有帮助。

Answer 2

你必须解析为文本节点的父节点，然后才能设置值。

使用它：

onchange="this.parentNode.parentNode.childNodes[1].value = this.value.split('\\').pop().split('/').pop()"

浏览的文件名未显示在文本框中

2 个答案: