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和safari浏览器中显示文本框，我们可以通过CSS本身配置显示样式，转到链接here

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

3 个答案: