jquery获取file表单选择文件的路径、名字、大小、类型

如何通过jQuery获取file表单选择文件的路径、名称、大小和类型呢？下面是完整的攻略。

1. HTML代码

首先，我们需要一个带有file表单控件的HTML表单：

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

2. jQuery代码

接下来，我们使用jQuery来获取该表单控件选中的文件的路径、名称、大小和类型。我们定义一个函数getFileData()，并将其绑定到表单控件的change事件上。一旦文件被选择，该函数会自动调用。函数内部定义了变量file，它指向表单控件选中的文件对象，并使用它来获取文件的相关信息。详见代码示例：

function getFileData() {
  var file = $('#file')[0].files[0];
  var filePath = $('#file').val();
  var fileName = file.name;
  var fileSize = file.size;
  var fileType = file.type;
  console.log('File path: ' + filePath);
  console.log('File name: ' + fileName);
  console.log('File size: ' + fileSize + ' bytes');
  console.log('File type: ' + fileType);
}

$('#file').on('change', getFileData);

3. 示例说明

下面我们通过两个示例来进一步说明如何获取file表单选择文件的路径、名称、大小和类型。

示例一：显示文件信息

在第一个示例中，我们使用jQuery将该文件的信息显示在网页上。我们给html文件加入如下代码：

<form>
  <input type="file" id="file">
</form>
<div id="file-info"></div>

然后，我们使用jQuery创建一个div元素，并在getFileData()函数中将其内容设置为文件的相关信息：

function getFileData() {
  var file = $('#file')[0].files[0];
  var fileName = file.name;
  var fileSize = file.size;
  var fileType = file.type;
  $('#file-info').html('File name: ' + fileName + '<br>' + 'File size: ' + fileSize + ' bytes' + '<br>' + 'File type: ' + fileType);
}

$('#file').on('change', getFileData);

这样，每当用户选择一个文件并上传时，文件的信息都会自动出现在创建的div元素中。

示例二：只允许选择指定类型的文件

在第二个示例中，我们防止用户上传不符合规定的文件类型。我们允许用户只上传图片文件。在html文件中，我们的代码如下：

<form>
  <input type="file" id="file" accept=".jpg, .jpeg, .png">
</form>

我们在input元素上加入accept属性，并将其值设置为所允许的文件类型的列表，用逗号分隔。在getFileData()函数中，我们添加一个条件语句，如果用户上传的文件不是所允许的文件类型之一，我们将会提示用户选择正确的文件。

function getFileData() {
  var file = $('#file')[0].files[0];
  var fileType = file.type;
  if (fileType !== 'image/jpeg' && fileType !== 'image/jpg' && fileType !== 'image/png') {
    alert('Please select a valid image file.');
    $('#file').val('');
    return false;
  }
}

这个条件语句首先获取文件的类型，然后判断该类型是否是我们所允许的类型之一。如果不是，会提示用户选择一个有效的文件。如果用户选择的文件类型无效，我们还要将表单控件的值设置为空，以便用户再次选择文件。

这就是获取file表单选择文件的路径、名称、大小和类型的完整攻略，希望能对您有所帮助！