JQuery异步提交表单与文件上传功能示例

下面是详细讲解“JQuery异步提交表单与文件上传功能示例”的完整攻略。

什么是JQuery异步提交表单与文件上传功能？

JQuery异步提交表单与文件上传功能是指利用JQuery框架实现无需刷新页面就能提交表单和上传文件的功能。一般情况下，表单和文件上传都是同步操作，即提交表单或上传文件后需要等待服务器的响应，并跳转到新的页面。但是，利用JQuery框架可以实现异步提交表单和上传文件，即提交表单或上传文件后不刷新页面，而是通过AJAX动态加载，从而提高用户体验和页面效率。

实现步骤

实现JQuery异步提交表单和文件上传功能需要以下步骤：

1. 引入JQuery库和JQuery表单插件

在头部引入JQuery库和JQuery表单插件：

<script src="jquery.min.js"></script>
<script src="jquery.form.js"></script>

1. 创建表单

创建一个表单，设置一个id以便后面进行操作：

<form id="form1" method="post" action="upload.php" enctype="multipart/form-data">
  <input type="text" name="name">
  <input type="file" name="file">
  <input type="submit" value="提交">
</form>

其中，action是需要提交到的服务器地址。

1. 初始化表单插件

使用JQuery表单插件初始化表单：

$(document).ready(function(){
  $('#form1').ajaxForm({
    beforeSubmit: function () {},
    success: function (data) {},
    error: function () {},
    clearForm: true
  });
});

其中，beforeSubmit是表单提交前的回调函数，success是表单提交成功后的回调函数，error是表单提交失败后的回调函数，clearForm设置为true表示提交成功后清空表单。

1. 处理表单提交数据

在upload.php文件中处理表单提交数据，在这里可以将数据存储到数据库中：

$name = $_POST['name'];
$file = $_FILES['file'];
//上传文件的代码
//...

1. 处理上传文件

在upload.php文件中处理上传文件，并将上传成功或失败的信息返回给前端页面，如下所示：

if (move_uploaded_file($file['tmp_name'], $save_path)) {
  exit('上传成功');
} else {
  exit('上传失败');
}

至此，JQuery异步提交表单与文件上传功能已经实现。

示例说明

下面分别举两个例子，说明JQuery异步提交表单与文件上传功能的具体实现。

示例一：异步提交表单

表单代码：

<form id="form1" method="post" action="upload.php">
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  <input type="password" id="password" name="password" placeholder="请输入密码">
  <input type="submit" value="登录">
</form>

JQuery代码：

$(document).ready(function () {
  $('#form1').ajaxForm({
    beforeSubmit: function () {
      //表单提交前的操作
    },
    success: function (data) {
      //表单提交成功后的操作
      alert(data);
    },
    error: function () {
      //表单提交失败后的操作
      alert('表单提交失败');
    },
    clearForm: true
  });
});

upload.php代码：

<?php
  $username = $_POST['username'];
  $password = $_POST['password'];
  if ($username == 'admin' && $password == '123456') {
    exit('登录成功');
  } else {
    exit('用户名或密码错误');
  }
?>

示例二：异步上传文件

表单代码：

<form id="form1" method="post" action="upload.php" enctype="multipart/form-data">
  <input type="file" id="file" name="file">
  <input type="submit" value="上传">
</form>

JQuery代码：

$(document).ready(function () {
  $('#form1').ajaxForm({
    beforeSubmit: function () {
      //表单提交前的操作
    },
    success: function (data) {
      //表单提交成功后的操作
      alert(data);
    },
    error: function () {
      //表单提交失败后的操作
      alert('表单提交失败');
    },
    clearForm: true
  });
});

upload.php代码：

<?php
  $file = $_FILES['file'];
  $save_path = 'upload/' . date('YmdHis') . '.jpg';
  if (move_uploaded_file($file['tmp_name'], $save_path)) {
    exit('上传成功');
  } else {
    exit('上传失败');
  }
?>

这里只是一个简单的示例，实际上您可以上传各种类型的文件，并进行一系列的操作，比如图片压缩、文件转码等等。