jQuery获取值名称上传文件

在web开发过程中，上传文件是一项很常见的需求，jQuery可以方便地获取文件信息并上传。本文将介绍如何使用jQuery获取上传文件的值和名称。

获取上传文件的值

通过jQuery.val()方法可以获得表单元素的值，包括文件上传元素（<input type="file">）。

下面是一个基本的文件上传表单：

<form id="uploadForm">
  <input type="file" name="fileUpload" id="fileUpload">
  <button type="submit">上传</button>
</form>

使用jQuery获取文件上传元素的值的代码如下：

var file = $('#fileUpload').val();

如果要获取多个文件上传元素的值，我们需要使用.map()方法：

var files = $('input[type=file]').map(function() {
  return $(this).val();
}).get();

以上代码将返回一个数组，包含表单中所有文件上传元素的值。

获取上传文件的名称

在大多数情况下，我们需要获取上传文件的名称。通过File API的File对象，可以获取文件的名称。为此，我们需要监听文件上传元素的change事件。例子代码如下：

$('#fileUpload').on('change', function() {
  var fileName = this.files[0].name;
  console.log(fileName);
});

上述代码监听文件上传元素的值变化，一旦文件发生改变，即可获取当前选择的文件的名称。

上传文件

如果要上传文件，我们可以使用jQuery的$.ajax()方法或$.post()方法。以下是一个基本的文件上传代码：

$('#uploadForm').on('submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      console.log(response);
    },
    error: function(xhr, status, error) {
      console.log(error);
    }
  });
});

以上代码为表单添加了submit事件监听器，一旦提交，会将表单数据封装成FormData对象，并通过$.ajax()方法上传到服务器。在处理数据时，processData设置为false，contentType设置为false，以确保不对数据进行处理。

如您所见，通过jQuery获取上传文件的值和名称非常简单，使用File API上传文件也变得非常容易。希望这篇介绍对您有所帮助！