Javascript获取上传文件名

在Web开发中，经常需要使用文件上传功能。而获取用户上传文件的文件名是十分必要的。下面介绍一些在Javascript中获取上传文件名的方法。

一、使用input元素

一般情况下，我们使用<input type="file">元素来实现文件上传功能。当用户选择完文件后，我们可以通过input元素的value属性来获取文件名。

<input type="file" onchange="console.log(this.value.split('\\').pop())">

上述代码中，onchange事件会在用户选择文件后触发。this.value即为用户选择的文件的路径，由于路径中可能包含斜杠\，我们需要用split('\\')来将其分割，然后取出最后一个元素，即文件名。

二、使用File API

HTML5引入了File API，可以使得在客户端操作文件变得更加容易。通过File API，我们可以获取到文件的各种信息，包括文件名。

<input type="file" id="file-input">
<script>
const fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", function() {
  console.log(this.files[0].name);
});
</script>

上述代码中，当用户选择文件后，change事件会触发，我们可以通过this.files[0]获取到用户选择的文件对象，然后使用.name访问文件名。

三、限制文件类型

为了防止用户上传非法文件，我们可以限制所上传的文件类型。这时我们需要通过accept属性对允许上传的文件类型进行规定。在获取文件名时，我们同样可以使用上述两种方法。

<input type="file" id="file-input" accept=".jpg, .jpeg, .png">
<script>
const fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", function() {
  console.log(this.files[0].name);
});
</script>

上述代码中，我们规定只能上传jpg、jpeg和png格式的文件。

以上就是在Javascript中获取上传文件名的几种方法。根据实际需求选择合适的方法即可。