博客

如何使用jQuery获得所选文件名的文件输入，而不需要路径

  • Post category:jquery

使用jQuery可以轻松获取所选文件名。下面的步骤将指导您如何通过jQuery获取所选文件的名称，而不需要路径。

第一步：HTML布局

要获取文件名，需要创建一个具有<input>元素的HTML表单。在HTML表单中，必须指定type="file"。下面的HTML代码将演示如何创建一个<input>类型的文件字段：

<form>
  <input type="file" id="file input" name="fileinput">
</form>

第二步：使用jQuery进行文件名提取

要使用jQuery获取所选文件名，可以使用下面的代码：

 $('#fileinput').change(function(){
   var filename = $(this).val().split('\\').pop();
   alert(filename);
 });

该代码使用了.change()事件，该事件在原始文件（此处为“file input”字段）更改时触发。通过使用val()函数，可以获取输入字段中选择的文件的完整路径。由于路径和文件名之间使用反斜杠\分隔，所以可以使用.split()函数将它们分离。.pop()函数可以从数组中提取最后一个（即文件名），并返回该值。然后将文件名赋值为变量filename。

示例说明一

例如我们创建一个HTML文件，并包含上述HTML代码与第二步的jQuery代码，现在我们在选择一个名为“example.pdf”的文件时就会直接返回文件名“example.pdf”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery获取文件名</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <form>
        <input type="file" id="inputfile" name="inputfile">
    </form>
    <script type="text/javascript">
        $('#inputfile').change(function(){
            var filename = $(this).val().split('\\').pop();
            alert(filename);
        });
    </script>
</body>
</html>

示例说明二

如果想要将文件名设置为某个元素的值，可以使用以下代码：

$('#fileinput').change(function(){
  var file = $(this).get(0).files[0];
  var filename = file.name;
  $('elementid').val(filename);
});

该代码获取所选文件对象（使用.get()函数），并使用.name属性提取文件名。最后，可以使用.val()函数将文件名设置为元素的值。

上面的例子中，我们将文件名设置为元素的文本值：

<form>
  <input type="file" id="fileinput" name="fileinput">
  <p>文件名将在此处显示：<span id="filename"></span></p>
</form>

$('#fileinput').change(function(){
  var file = $(this).get(0).files[0];
  var filename = file.name;
  $('#filename').text(filename);
});

这将在页面上创建一个文本段落，并将<span>元素的id设置为"filename"。对于这个<span>元素，我们将使用.text()函数将文件名值设置为文本内容。

Tags: