输入文件：使用Javascript在文本输入中写入文件的名称

Question

我正在学习html和javascript，我想知道是否可以执行以下操作：使用文件输入上传文件时，希望将上传的文件名（不带路径）写入文件输入字段。这可能吗？ 下面是我的代码，但无法获得任何解释如何为新手做这个的链接。 很抱歉，如果这是一个非常愚蠢的问题，但我想知道你是否只能使用javascript（不是jQuery）和HTML而不涉及服务器。

<html>
    <head>
        <script type="text/javascript">
            (function alertFilename()
            {
                var thefile = document.getElementById('thefile');
        //here some action to write the filename in the input text

            }
        </script>
    </head>
    <body>
        <form>

            <input type="file" id="thefile" style="display: none;"  />
            <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
            <br> <br>The name of the uploaded file is:
            <input type="text" name="some_text" id="some_text" />

        </form>
    </body>
</html>

Answer 1

这是一个完整的JavaScript示例：

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

HTML：

<form>
    <input type="file" id="fileInput" style="display: none;"  />
    <input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
    <br> <br>The name of the uploaded file is:
    <input type="text" name="some_text" id="some_text" />
</form>

jsFiddle live example

希望你觉得它有用，Asaf

Answer 2

对于新人：

 document.getElementById("thefile").onchange = function() { document.getElementById("some_text").value = this.files[0].name; }; /* BELOW FULLPATH VERSION (depending on browser) document.getElementById("thefile").onchange = function () { document.getElementById("some_text").value = this.value; };*/

 <form> <input type="file" id="thefile" style="display: none;" /> <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" /> <br> <br>The name of the uploaded file is: <input type="text" name="some_text" id="some_text" /> </form>

Answer 3

只需取文件输入'值，拆分它并取最后一个索引：

Filename = document.getElementById（'fileinput'）。value.split（'/'）[2]; //或者这里返回的最后一个索引，因为最后一个索引将始终是文件名

（对不起，我不能格式化我的答案。我用智能手机回答）

输入文件：使用Javascript在文本输入中写入文件的名称

问题描述

3 个解决方案

解决方案1
3 2013-09-18 00:53:11

解决方案2
1 2016-03-15 16:37:19

解决方案3
0 2013-09-18 00:43:11

输入文件：使用Javascript在文本输入中写入文件的名称

问题描述

3 个解决方案

解决方案1 3 2013-09-18 00:53:11

解决方案2 1 2016-03-15 16:37:19

解决方案3 0 2013-09-18 00:43:11

解决方案1
3 2013-09-18 00:53:11

解决方案2
1 2016-03-15 16:37:19

解决方案3
0 2013-09-18 00:43:11