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 个答案: