jQuery插件ajaxFileUpload使用详解

简介

ajaxFileUpload 是一款非常常用的 jQuery 插件，可以轻松地实现文件上传功能。本文将详细介绍该插件的使用方法。

安装

首先，需要引入 jQuery 库和 ajaxFileUpload 插件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.ajaxfileupload.js"></script>

基本用法

以下为 ajaxFileUpload 的基本用法：

$.ajaxFileUpload({
  url: 'upload.php',
  secureuri: false,
  fileElementId: 'fileToUpload',
  dataType: 'json',
  success: function (data, status) {
    if (typeof (data.error) !== 'undefined') {
      if (data.error !== '') {
        console.log(data.error);
      } else {
        console.log('File Uploaded');
      }
    }
  },
  error: function (data, status, e) {
    console.log(e);
  }
});

其中各参数说明如下：
- url: 上传文件的地址
- secureuri: 是否启用安全 URI
- fileElementId: 文件上传表单元素的ID
- dataType: 服务器返回的数据类型，可选 json、xml、script 或 html
- success: 成功回调函数
- error: 失败回调函数

示例1：上传图片并返回图片的URL

以下代码实现了上传图片并返回图片的URL：

<!DOCTYPE html>
<html>
<head>
  <title>Ajax File Upload Plugin Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="jquery.ajaxfileupload.js"></script>
  <script>
    $(function () {
      $('#upload').on('click', function () {
        $.ajaxFileUpload({
          url: 'upload.php',
          secureuri: false,
          fileElementId: 'fileToUpload',
          dataType: 'json',
          success: function (data, status) {
            if (typeof (data.error) !== 'undefined') {
              if (data.error !== '') {
                console.log(data.error);
              } else {
                console.log(data.url);
                $('#imgContainer').html('<img src="' + data.url + '" />');
              }
            }
          },
          error: function (data, status, e) {
            console.log(e);
          }
        });
        return false;
      });
    });
  </script>
</head>
<body>
  <form enctype="multipart/form-data" method="post">
    <input type="file" name="fileToUpload" id="fileToUpload" />
    <input type="button" id="upload" value="Upload" />
  </form>
  <div id="imgContainer"></div>
</body>
</html>

upload.php 文件的代码如下：

<?php
$uploadDir = 'uploads/';

if (!empty($_FILES['fileToUpload'])) {
  $file = $_FILES['fileToUpload'];
  $uploadFile = $uploadDir . basename($file['name']);
  if (move_uploaded_file($file['tmp_name'], $uploadFile)) {
    echo json_encode(array('url' => $uploadFile));
  } else {
    echo json_encode(array('error' => 'Error while uploading the file.'));
  }
} else {
  echo json_encode(array('error' => 'No file uploaded.'));
}
?>

这份代码实现了将文件上传到 uploads 目录中，然后返回图片的 URL。在客户端中，通过添加一个图片标签，显示图片。

示例2：上传多个文件

以下代码实现了上传多个文件：

<!DOCTYPE html>
<html>
<head>
  <title>Ajax File Upload Plugin Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="jquery.ajaxfileupload.js"></script>
  <script>
    $(function () {
      $('#upload').on('click', function () {
        var files = $('#fileToUpload')[0].files;
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
          formData.append('files[]', files[i]);
        }
        $.ajax({
          url: 'upload.php',
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          dataType: 'json',
          success: function (data, status) {
            if (typeof (data.error) !== 'undefined') {
              if (data.error !== '') {
                console.log(data.error);
              } else {
                console.log(data.url);
                $('#imgContainer').html('<img src="' + data.url + '" />');
              }
            }
          },
          error: function (data, status, e) {
            console.log(e);
          }
        });
        return false;
      });
    });
  </script>
</head>
<body>
  <form enctype="multipart/form-data" method="post">
    <input type="file" name="fileToUpload" id="fileToUpload" multiple/>
    <input type="button" id="upload" value="Upload" />
  </form>
  <div id="imgContainer"></div>
</body>
</html>

upload.php 文件的代码如下：

<?php
$uploadDir = 'uploads/';
$result = array();

if (!empty($_FILES['files'])) {
  $files = $_FILES['files'];
  foreach ($files['name'] as $key => $value) {
    $uploadFile = $uploadDir . basename($value);
    if (move_uploaded_file($files['tmp_name'][$key], $uploadFile)) {
      $result[] = array('name' => $value, 'url' => $uploadFile);
    } else {
      $result[] = array('name' => $value, 'error' => 'Error while uploading the file.');
    }
  }
} else {
  $result[] = array('error' => 'No file uploaded.');
}

echo json_encode($result);
?>

这份代码实现了将每个文件上传到 uploads 目录中，然后返回文件名和 URL。在客户端中，通过添加一个图片标签和一个 anchor 标签，显示每个文件的缩略图和下载链接。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery插件ajaxFileUpload使用详解 - Python技术站

jQuery插件ajaxFileUpload使用详解

jQuery插件ajaxFileUpload使用详解

简介

安装

基本用法

示例1：上传图片并返回图片的URL

示例2：上传多个文件

相关文章