Jquery插件之多图片异步上传

Jquery插件之多图片异步上传的完整攻略如下：

1. 异步上传图片的原理

异步上传图片使用Ajax技术，通过将图片转换成二进制数据流，并通过FormData对象封装后发送到服务器，实现图片的上传，并在服务器端处理上传的图片数据。

2. 编写多图片异步上传插件的步骤

2.1 HTML部分

首先，需要在HTML文件中引入以下代码：

<div class="upload-area">
  <div id="upload-btn" class="btn btn-primary">上传图片</div>
  <ul id="upload-list"></ul>
</div>

其中，upload-area为上传区域的包裹元素，upload-btn为触发上传图片的按钮，upload-list为展示上传图片的列表。

2.2 CSS部分

其次，可以对上传区域的样式进行调整：

.upload-area {
  position: relative;
  width: 400px;
  height: 200px;
  border: 2px dashed #ccc;
  text-align: center;
}

#upload-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#upload-list {
  margin-top: 20px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

#upload-list li {
  float: left;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

#upload-list li .delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
}

2.3 JS部分

最后，需要编写JQuery插件的JS部分。以下是完整的代码：

(function($) {
  $.fn.multiUpload = function(options) {
    var defaults = {
      url: '', // 上传图片路径
      allowTypes: ['jpg', 'jpeg', 'png', 'gif'], // 允许上传的图片类型
      maxSize: 5*1024*1024, // 允许上传的单张图片最大大小，默认为5MB
      maxCount: 8 // 允许上传的最大图片数，默认为8张
    };
    var opts = $.extend({}, defaults, options);

    var $uploadArea = $(this),
        $uploadBtn = $uploadArea.find('#upload-btn'),
        $uploadList = $uploadArea.find('#upload-list');

    // 判断浏览器是否支持FormData以及XMLHttpRequest对象
    if (!window.FormData || !window.XMLHttpRequest) {
      alert('您的浏览器不支持上传图片功能，请升级您的浏览器！');
      return;
    }

    // 显示已上传的图片
    showUploadedImages();

    // 绑定上传图片事件
    $uploadBtn.on('click', function() {
      // 判断上传图片的数量是否超过最大值
      if ($uploadList.children('li').length >= opts.maxCount) {
        alert('最多只能上传' + opts.maxCount + '张图片！');
        return;
      }

      // 创建input元素，用于选择图片
      var $input = $('<input type="file"/>');
      $input.css({
        'opacity': '0',
        'position': 'absolute',
        'left': '0',
        'top': '0',
        'width': '100%',
        'height': '100%',
        'cursor': 'pointer'
      });

      // 添加到上传区域
      $uploadArea.append($input);

      // 绑定图片选择事件
      $input.on('change', function() {
        var file = this.files[0];

        // 判断图片类型是否符合要求
        if (!checkFileType(file.type)) {
          alert('仅支持上传jpg、jpeg、png、gif格式的图片！');
          return;
        }

        // 判断图片大小是否符合要求
        if (file.size > opts.maxSize) {
          alert('上传的图片不能大于' + (opts.maxSize/1024/1024).toFixed(2) + 'MB！');
          return;
        }

        // 创建FormData对象
        var formData = new FormData();
        formData.append('file', file);

        // 发送AJAX请求，上传图片
        $.ajax({
          url: opts.url,
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(data) {
            // 添加图片到列表
            var $item = $('<li></li>').appendTo($uploadList);
            $('<img src="' + data.url + '"/><span class="delete-btn">×</span>').appendTo($item);

            // 移除input元素
            $input.remove();
          }
        });
      });

      // 模拟点击事件，触发选择图片操作
      $input.trigger('click');
    });

    // 删除已上传的图片
    $uploadList.on('click', '.delete-btn', function() {
      $(this).closest('li').remove();
    });

    // 检查上传的文件类型是否符合要求
    function checkFileType(fileType) {
      var isAllowed = false;
      for (var i=0; i<opts.allowTypes.length; i++) {
        if (fileType === 'image/' + opts.allowTypes[i]) {
          isAllowed = true;
          break;
        }
      }
      return isAllowed;
    }

    // 显示已上传的图片
    function showUploadedImages() {
      $.ajax({
        url: opts.url,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          if (data && data.length) {
            for (var i=0; i<data.length; i++) {
              var $item = $('<li></li>').appendTo($uploadList);
              $('<img src="' + data[i].url + '"/><span class="delete-btn">×</span>').appendTo($item);
            }
          }
        }
      });
    }
  };
})(jQuery);

3. 示例说明

3.1 示例一

使用多图片异步上传插件的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多图片异步上传</title>
  <link rel="stylesheet" href="multi-upload.css">
</head>
<body>
  <div class="upload-area">
    <div id="upload-btn" class="btn btn-primary">上传图片</div>
    <ul id="upload-list"></ul>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="multi-upload.js"></script>
  <script>
    $(function() {
      $('.upload-area').multiUpload({
        url: 'upload.php'
      });
    });
  </script>
</body>
</html>

其中，upload.php是服务器端处理上传图片的代码，示例如下：

<?php
header('Content-Type: application/json; charset=utf-8');

$file = $_FILES['file'];
$fileName = $file['name'];
$fileSize = $file['size'];
$fileTemp = $file['tmp_name'];

$baseDir = 'uploads/';
if (!file_exists($baseDir)) {
  mkdir($baseDir);
}
$ext = pathinfo($fileName, PATHINFO_EXTENSION);
$newName = md5(uniqid(microtime(), true)) . '.' . $ext;
if (move_uploaded_file($fileTemp, $baseDir . $newName)) {
  echo json_encode(array('url' => $baseDir . $newName));
} else {
  echo json_encode(array('error' => '上传图片失败！'));
}
?>

该示例的效果可以参考以下代码片段：

https://codepen.io/mario_kart/pen/yorMmJy

3.2 示例二

使用多图片异步上传插件和jQuery.validate插件实现上传图片表单验证的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传图片</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <link rel="stylesheet" href="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css">
  <link rel="stylesheet" href="multi-upload.css">
</head>
<body>
  <form id="image-form" action="upload.php" method="POST" enctype="multipart/form-data">
    <div class="upload-area">
      <div id="upload-btn" class="btn btn-primary">添加图片</div>
      <ul id="upload-list"></ul>
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
  </form>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
  <script src="multi-upload.js"></script>
  <script>
    $(function() {
      $('#image-form').bootstrapValidator({
        excluded: ':disabled', // 忽略隐藏、禁用的元素
        feedbackIcons: { // 验证错误时显示的图标
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          file: {
            validators: {
              notEmpty: { message: '请选择您要上传的图片！' },
              file: {
                extension: 'jpg,jpeg,png,gif',
                type: 'image/jpg,image/jpeg,image/png,image/gif',
                maxSize: 5 * 1024 * 1024,
                message: '仅支持上传大小不超过5MB的图片，文件类型必须是jpg、jpeg、png、gif格式！'
              }
            }
          }
        }
      });

      $('.upload-area').multiUpload({
        url: 'upload.php'
      });
    });
  </script>
</body>
</html>

该示例需要引入jQuery.ui和jQuery.validate插件，upload.php的代码同上一个示例。

该示例的效果可以参考以下代码片段：

https://codepen.io/mario_kart/pen/LYePBZo