jQuery AjaxUpload 上传图片代码

下面我将详细讲解如何使用jQuery AjaxUpload上传图片的完整攻略。

1. 引入jQuery和AjaxUpload插件

首先，我们需要引入jQuery和AjaxUpload插件。可以通过以下方式引入：

<!-- 引入jQuery文件 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- 引入AjaxUpload插件 -->
<script src="https://cdn.bootcss.com/ajaxupload/3.6.1/ajaxupload.min.js"></script>

2. 创建上传按钮和文件选择框

接下来，我们需要创建上传按钮和文件选择框。可以通过以下方式创建：

<button id="uploadBtn">上传图片</button>
<input type="file" id="fileInput">

其中，id为“uploadBtn”的按钮用于点击上传，id为“fileInput”的文件选择框用于选择要上传的图片文件。

3. 编写上传代码

具体的上传代码如下所示：

$(function () {
  var btn = $('#uploadBtn'),
      input = $('#fileInput');

  new AjaxUpload(btn, {
    action: '/upload', // 上传图片的接口地址
    name: 'myfile', // 文件域的名称
    data: { // 需要传递的其他数据
      type: 'avatar',
      userId: '123456'
    },
    onSubmit: function (file, ext) { // 上传前回调函数
      if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
        this.setData({
          'name': file,
          'ext': ext
        });
      } else {
        alert('文件类型不符合要求！');
        return false;
      }
    },
    onComplete: function (file, response) { // 上传完成回调函数
      if (response.status === 'success') {
        alert('上传成功！');
        $('#img').attr('src', response.url);
      } else {
        alert('上传失败！');
      }
    }
  });
});

具体说明如下：

创建AjaxUpload实例：new AjaxUpload(btn, options)
btn为上传按钮的jQuery对象；
options为配置选项，其中action指定上传图片的接口地址，name指定文件域的名称，data为需要传递的其他数据；
onSubmit为上传前回调函数，file为即将上传的文件名，ext为文件名的扩展名，可以在此函数中对文件进行判断和处理；
onComplete为上传完成回调函数，file为上传的文件名，response为服务器返回的结果。

4. 示例说明

下面是两个示例说明：

示例1：上传图片并显示在页面上

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo1</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/ajaxupload/3.6.1/ajaxupload.min.js"></script>
</head>
<body>
  <button id="uploadBtn">上传图片</button>
  <input type="file" id="fileInput">
  <br>
  <img id="img" src="" alt="">
  <script>
    $(function () {
      var btn = $('#uploadBtn'),
          input = $('#fileInput');

      new AjaxUpload(btn, {
        action: '/upload',
        name: 'myfile',
        data: {
          type: 'avatar',
          userId: '123456'
        },
        onSubmit: function (file, ext) {
          if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
            this.setData({
              'name': file,
              'ext': ext
            });
          } else {
            alert('文件类型不符合要求！');
            return false;
          }
        },
        onComplete: function (file, response) {
          if (response.status === 'success') {
            alert('上传成功！');
            $('#img').attr('src', response.url);
          } else {
            alert('上传失败！');
          }
        }
      });
    });
  </script>
</body>
</html>

示例2：上传多张图片

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo2</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/ajaxupload/3.6.1/ajaxupload.min.js"></script>
</head>
<body>
  <button id="addBtn">添加图片</button>
  <br>
  <ul id="imgList"></ul>
  <script>
    $(function () {
      var btn = $('#addBtn'),
          ul = $('#imgList'),
          i = 0;

      new AjaxUpload(btn, {
        action: '/upload',
        name: 'myfile',
        data: {
          type: 'avatar',
          userId: '123456'
        },
        onSubmit: function (file, ext) {
          if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
            this.setData({
              'name': file,
              'ext': ext
            });
          } else {
            alert('文件类型不符合要求！');
            return false;
          }
        },
        onComplete: function (file, response) {
          if (response.status === 'success') {
            alert('上传成功！');
            $('<li><img src="' + response.url + '"></li>').appendTo(ul);
            i++;
          } else {
            alert('上传失败！');
          }
        }
      });
    });
  </script>
</body>
</html>

通过以上两个示例，你可以学习到如何使用jQuery AjaxUpload上传图片。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery AjaxUpload 上传图片代码 - Python技术站