HTML JavaScript – 从input type=file获取文件名和扩展名

在本文中，我们将介绍如何使用HTML和JavaScript从中获取文件名和扩展名。

阅读更多：HTML 教程

HTML 文件上传表单

首先，在HTML中创建一个文件上传表单。使用元素来允许用户选择文件。以下是一个简单的示例：

<form>
  <label for="myFile">选择文件:</label>
  <input type="file" id="myFile" name="myFile">
  <input type="button" value="提交" onclick="getFileNameAndExtension()">
</form>

在上面的示例中，我们创建了一个元素，用于显示文本“选择文件”。然后，我们使用元素创建一个文件选择框，其中的id和name属性设置为“myFile”。最后，我们添加了一个“提交”按钮，并在点击按钮时调用了一个JavaScript函数“getFileNameAndExtension()”。

JavaScript 获取文件名和扩展名

接下来，让我们编写JavaScript函数来获取用户选择的文件的文件名和扩展名。以下是一个实现的例子：

function getFileNameAndExtension() {
  var fileInput = document.getElementById("myFile");
  var filePath = fileInput.value;
  var fileName = filePath.split("\\").pop().split("/").pop();
  var fileExtension = fileName.split(".").pop();
  alert("文件名: " + fileName);
  alert("扩展名: " + fileExtension);
}

在上面的代码中，我们首先使用JavaScript的document.getElementById()函数获取元素的引用。然后，我们通过访问元素的value属性获取文件路径。接下来，我们使用split()函数将文件路径转换为文件名。我们假设文件路径中的斜杠是使用正斜杠“/”或反斜杠“\”分隔的。因此，我们使用split()函数来获取文件名。最后，我们再次使用split()函数获取文件名的扩展名。

在获取文件名和扩展名之后，我们可以根据自己的需求进行进一步的处理。在上面的例子中，我们使用alert()函数显示文件名和扩展名。您可以根据自己的需求将这些值发送到服务器或进行其他操作。

我们还可以在用户选择文件时触发事件，并在事件处理程序中执行获取文件名和扩展名的功能。以下是一个例子，当用户选择文件时会触发onChange事件：

<input type="file" id="myFile" name="myFile" onChange="getFileNameAndExtension()">

总结

通过本文，我们学习了如何使用HTML和JavaScript从中获取文件的文件名和扩展名。通过获取文件路径并使用字符串处理函数，我们可以轻松地提取文件名和扩展名，并根据需要进一步处理这些值。无论是将文件上传到服务器还是进行其他操作，获取文件名和扩展名是处理文件上传的重要步骤。希望本文对您有所帮助！