Question

我关注Javascript - How to extract filename from a file input control，从输入/上传文件中获取文件名时遇到的问题很少。我使用此代码从输入文件中获取文件名

var fileInput = document.getElementById('upload_file').files[0].name;

但是当我换另一个文件时，我仍然得到我的旧文件名，我需要刷新浏览器以获取最新的文件名。如何解决这样的问题？

<html>
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
        <input type="file" id="upload_file">
        <br>
        <h1 id="nama_file"></h1>
        <script>
            var fileInput = document.getElementById('upload_file').files[0].name;   
            //var filename = fileInput.files[0].name;
            console.log(fileInput);
            document.getElementById('nama_file').innerText = fileInput;
        </script>
    </body>
</html>

Answer 1

您可以在每次加载时添加一个事件，并更改＆＃39; name_file＆＃39;的内部文本。相应

＆＃13;

<html>
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
        <input type="file" id="upload_file">
        <br>
        <h1 id="nama_file"></h1>
        <script>
            var fileInput = document.getElementById('upload_file').files[0].name;   
            fileInput.addEventListener('change', () => {
            	document.getElementById('nama_file').innerText = fileInput;
            });
            console.log(fileInput);
        </script>
    </body>
</html>

＆＃13;

Answer 2

您需要一个活动：

＆＃13;

var filename = document.getElementById('filename');
document.getElementById('upload_file').addEventListener('change', function(e) {
  filename.innerText = e.target.files[0].name;
});

＆＃13;

<input type="file" id="upload_file">
<br>
<h1 id="filename"></h1>

＆＃13;

如何从上传文件中获取最新文件名？

2 个答案: