javascript - 选择文件后自动在输入中获取文件名

Question

我正在做我的上传文件页面，我有一个页面有一个 <input>用户可以在这里为他的文件写一个名字，另一个 <input>用户将在其中选择一个文件。

我想做的是，在用户选择文件后，输入的名称会自动填充文件名(不带扩展名)。

我的 html 代码看起来像那样

<div class="card-header text-center" data-background-color="rose" style="margin-left: 15px;">
     <h3 class="card-title">Upload file</h3>
</div>
<div class="card-content">
     <div class="input-group">
         <span class="input-group-addon"></span>
    
      <div class="form-group label-floating">
           <label class="control-label"><h4>Chose a name</h4></label><br>
           <input type="text" name="name" id="name" class="form-control" value="" required>
     </div>
    
     <div class="form-group label-floating">
           <label class="control-label"><h4>Choose a file</h4></label><br>
           <input type="file" id="file" name="file" required>
     </div>
</div>
</div>

而且我希望它在我选择文件后立即被填充，因为我在面向对象的编程中这样做并且我无法重新加载页面，因为我有 csrf . 我希望在获得名称后，填充上传文件的名称。

Answer 1

添加这个应该做你想做的，在 JQuery 中会更容易，但由于你指定了 javascript，我保留了所有纯 JS。

<script>
    file.onchange = function(e) { 
        //Get the file path
        var fileName = document.getElementById("file").value; 
        //Get the filename
        var fileName2 = fileName.replace(/^.*[\\\/]/, '');
        //Remove the extension and set the input text
        document.getElementById("name").value = fileName2.replace(/\.[^/.]+$/, ""); 
    };
</script>