通过jquery获取上传文件名称、类型和大小的实现代码

通过 jQuery 获取上传文件的名称、类型和大小，可以通过 FormData 和 FileReader 对象实现。具体的实现步骤如下：

HTML

首先，在 HTML 中添加一个 input 标签，作为上传文件的入口：

<form>
  <input type="file" id="upload">
  <button type="button" id="submit">上传</button>
</form>

其中，id 为 “upload” 的 input 标签是上传文件的入口，id 为 “submit” 的 button 标签用于提交表单（这里只是举例，实际中可能需要在其他地方添加事件监听器）。

JavaScript

在 JavaScript 中，使用 jQuery 选择上传文件的入口，然后添加事件监听器，以便在文件被选中后能够获取文件的名称、类型和大小：

$(document).ready(function() {
  $('#upload').on('change', function() {
    var file = $(this).get(0).files[0];
    console.log('名称：' + file.name);
    console.log('类型：' + file.type);
    console.log('大小：' + file.size);
  });
});

上述代码中，我们先使用 jQuery 获取上传文件的入口，然后添加 change 事件监听器。当文件被选中后，获取文件对象，通过文件对象就可以获取文件的名称、类型和大小了。

示例说明

下面是两个示例，帮助你更好地理解这个过程。

示例 1：展示文件信息

$(document).ready(function() {
  $('#upload').on('change', function() {
    var file = $(this).get(0).files[0];
    var formData = new FormData();
    formData.append('file', file);
    $('#file-name').text('名称：' + file.name);
    $('#file-type').text('类型：' + file.type);
    $('#file-size').text('大小：' + file.size);
  });
});

这个示例中，我们为每一个文件信息创建了一个展示标签，这样就可以实时展示文件的信息了。

示例 2：使用 FileReader 对象读取上传的文件

$(document).ready(function() {
  $('#upload').on('change', function() {
    var file = $(this).get(0).files[0];
    var reader = new FileReader();
    reader.onload = function() {
      $('#preview').attr('src', reader.result);
    }
    reader.readAsDataURL(file);
  });
});

这个示例中，我们使用 FileReader 对象读取上传的图片文件，并在页面上展示预览图。注意，这只适用于图片文件，如果上传其他类型的文件，将无法正常展示。