介绍

jquery-ajaxfileupload是一个基于jQuery的异步上传插件，可用于向服务器上传文件并返回结果，开发者只需要在前端代码中调用该插件的api即可。本文主要介绍该插件的使用方法和示例代码。

安装

首先需要引入jQuery库和jquery-ajaxfileupload插件的JS文件和样式文件，可以使用CDN或直接下载本插件的JS和CSS文件。

使用

HTML

在HTML文件中，需要配置上传文件的表单，并添加文件选择控件。

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <button id="uploadBtn" type="button">上传</button>
</form>

JS

在JS文件中，需要为上传按钮添加事件监听，并在事件处理函数中调用ajaxFileUpload方法，上传文件到服务器。

$('#uploadBtn').click(function() {
  $.ajaxFileUpload({
    url: 'upload.php',
    secureuri: false,
    fileElementId: 'uploadForm',
    dataType: 'json',
    success: function(data, status) {
      alert(data.msg);
    },
    error: function(data, status, e) {
      alert(e);
    }
  });
});

在这个例子中，我们使用$.ajaxFileUpload方法发起异步上传请求，该方法需要传入一个对象作为参数，对象中包含一些配置项：

url：上传文件的URL地址，该地址由后端给出
secureuri：是否启用SSL
fileElementId：上传文件的表单ID
dataType：请求结果的数据类型
success：请求成功的回调函数
error：请求失败的回调函数

需要注意的是，fileElementId需要填写上传文件的表单元素ID。

PHP

在PHP脚本中，需要对上传的文件进行处理，并返回处理结果。

<?php
if ($_FILES['file']['error'] == UPLOAD_ERR_OK) {
  // 文件上传成功，处理上传的数据
  $file = $_FILES['file'];
  $uploadPath = 'uploads/' . $file['name']; // 可以修改上传路径

  if(move_uploaded_file($file['tmp_name'], $uploadPath)) {
    // 文件保存成功，返回结果到前端
    $data = ['success' => true, 'msg' => '上传成功'];
    echo json_encode($data);
  } else {
    // 文件保存失败，返回错误信息到前端
    $data = ['success' => false, 'msg' => '上传失败'];
    echo json_encode($data);
  }
} else {
  // 文件上传失败，返回错误信息到前端
  $data = ['success' => false, 'msg' => '上传错误'];
  echo json_encode($data);
}
?>

在上面的PHP示例中，我们首先判断文件上传状态，如果上传成功则将上传文件保存到指定的路径中。如果保存成功，则返回上传成功的结果，否则返回失败的结果。

示例

示例一

以下是一个简单的上传示例，将选定的本地文件上传到服务器，保存在uploads目录中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传文件示例</title>
  <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="ajaxfileupload.js"></script>
</head>
<body>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file">
    <button id="uploadBtn" type="button">上传</button>
  </form>

  <script>
    $('#uploadBtn').click(function() {
      $.ajaxFileUpload({
        url: 'upload.php',
        secureuri: false,
        fileElementId: 'uploadForm',
        dataType: 'json',
        success: function(data, status) {
          alert(data.msg);
        },
        error: function(data, status, e) {
          alert(e);
        }
      });
    });
  </script>
</body>
</html>

示例二

以下是一个多文件上传示例，支持上传多个文件并在上传完成后提示上传结果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传文件示例</title>
  <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="ajaxfileupload.js"></script>
</head>
<body>
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file[]" multiple>
    <button id="uploadBtn" type="button">上传</button>
  </form>

  <script>
    $('#uploadBtn').click(function() {
      $.ajaxFileUpload({
        url: 'upload.php',
        secureuri: false,
        fileElementId: 'uploadForm',
        dataType: 'json',
        success: function(data, status) {
          alert(data.msg);
        },
        error: function(data, status, e) {
          alert(e);
        },
        complete: function(xhr, status) {
          // 所有文件上传完成后，提示上传结果
          alert('所有文件上传完成');
        }
      });
    });
  </script>
</body>
</html>

在这个例子中，我们添加了一个multiple属性在<input>标签中，以支持上传多个文件。另外，我们在配置对象中添加了complete属性，用于判断所有文件是否都上传完成，如果都完成则弹出上传结果提示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery之ajaxfileupload异步上传插件(附工程代码) - Python技术站

jquery之ajaxfileupload异步上传插件(附工程代码)

介绍

安装

使用

HTML

JS

PHP

示例

示例一

示例二

相关文章