问题描述
我正在做我的上传文件页面，并且我的页面上有一个<input> ，用户可以在其中<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而无法重新加载页面。
我想在获得名称后，用上载文件的名称填充。
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>
2楼
我已经更新了您的代码，如果需要澄清，请告诉我
<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" onchange="getFileData(this);" required> </div> </div> </div> <script type="text/javascript"> function getFileData(myFile){ var file = myFile.files[0]; document.getElementById("name").value = file.name; } </script>