在 JS 中获取上传的文件名 - Javascript

在Web开发中，上传文件是一项常见的操作。而在JS中，获取上传文件的文件名则是其中一项常用的操作。下面将介绍如何通过JS代码来获取上传的文件名。

文件上传的HTML标记

在获取上传文件名之前，我们需要先搭建一个基础的文件上传HTML标记。例如，以下代码会创建一个文件上传按钮：

<input type="file" id="upload-file" name="upload-file">

JS代码获取上传文件名

通过JS代码，我们可以监听上传文件按钮的变化事件（change）来获取文件名。通常我们会将获取到的文件名显示在页面上，也可以将其作为一个变量进行后续处理。以下是一个示例代码：

let fileUpload = document.getElementById("upload-file"); //获取文件上传按钮
let fileName = '';

fileUpload.addEventListener('change', function(event) { //监听文件上传按钮的变化事件
  fileName = event.target.files[0].name; //获取上传的文件名
  console.log(fileName); //将文件名输出到console窗口中
});

上述代码中，我们先获取了文件上传按钮（通过document.getElementById()函数），然后添加了一个change事件监听器，当上传文件的按钮状态发生变化时，函数中的回调函数就会被执行。在回调函数中，我们获取了上传文件的文件名，存储在fileName变量中，并将其输出到了控制台窗口中。

总结

通过以上代码，我们成功地实现了在JS代码中获取上传文件名的操作。在实际应用中，可以将获取到的文件名用于后续的文件上传操作或文件名显示等用途。