2

我正在学习 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>
4

3 回答 3

4

这是一个完整的 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 实例

希望你觉得它有帮助，阿萨夫

于 2013-09-18T00:53:11.770 回答
1

对于新人：

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>

于 2016-03-15T16:37:19.793 回答
0

只需获取文件输入的值，将其拆分并获取最后一个索引：

Filename = document.getElementById('fileinput').value.split('/') [2];//或者这里返回的最后一个索引，因为最后一个索引永远是文件名

（抱歉无法格式化我的答案。我用智能手机回答）

于 2013-09-18T00:43:11.880 回答