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

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/)