如何在文本框中编写要上传的文件的路径？

Question

小问题：我正在尝试创建一个表单来上传文件。

现在我有一个按钮来选择文件和提交按钮。

我如何设计它就像我选择了一个文件一样，它的路径（C：\\ Users ....）显示在文本框中？

谢谢你的帮助

Answer 1

要将选定的文件名/路径复制到不同的文本框，首先要使用此JS：

function CopyMe(oFileInput, sTargetID) {
    document.getElementById(sTargetID).value = oFileInput.value;
}

它将适用于这样的HTML：

<div>
    <input type="file" onchange="CopyMe(this, 'txtFileName');" />
</div>
<div>
    You chose: <input id="txtFileName" type="text" readonly="readonly" />
</div>

测试用例： http ： //jsfiddle.net/yahavbr/gP7Bz/

请注意，现代浏览器将隐藏显示类似C:\\fakepath\\realname.txt的真实完整路径，以便仅显示名称（实际）更改为：

function CopyMe(oFileInput, sTargetID) {
    var arrTemp = oFileInput.value.split('\\');
    document.getElementById(sTargetID).value = arrTemp[arrTemp.length - 1];
}

（ http://jsfiddle.net/yahavbr/gP7Bz/1/ ）

Answer 2

如果要上传文件，请使用<input type="file" …> ，它将带有自己的按钮。 不要忘记设置enctype 。

常规文本框不允许您上传文件。

Answer 3

<input type="file"..>不会在chrome和safri浏览器中显示文本框，我们可以通过CSS本身配置显示样式，点击此处链接