jquery实现上传图片功能

下面是详细讲解“jquery实现上传图片功能”的完整攻略：

准备工作

在实现上传图片功能之前，需要先准备好上传图片的表单和后台接收图片的接口。表单需要设置enctype为multipart/form-data，同时需要一个file类型的input。

后台接收图片的接口需要接收上传图片的二进制文件，可以使用Node.js的express框架实现。

使用jQuery实现上传图片

下面是实现上传图片功能的步骤：

1. 监听input的change事件

使用jQuery的change事件监听input的变化，当用户选择了图片之后，就触发上传图片的操作。

$(document).on('change', 'input[type="file"]', function() {
  // 上传图片
});

2. 创建FormData对象

创建FormData对象，用于将上传的文件和其他数据发送给服务器。

var formData = new FormData();
formData.append('file', this.files[0]);

3. 发送Ajax请求

使用jQuery的ajax方法发送请求，将FormData作为请求参数发送给服务器。

$.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  success: function() {
    // 上传成功的处理
  },
  error: function() {
    // 上传失败的处理
  },
  cache: false,
  contentType: false,
  processData: false
});

需要注意的是，需要将ajax请求的contentType设置为false，这样jQuery才会自动添加正确的Content-Type头部信息。同时，需要将processData设置为false，否则jQuery会将FormData对象自动转化为查询字符串形式。

示例说明

下面是两个示例，分别演示了使用jQuery实现上传图片的基本步骤和如何添加进度条显示上传进度。

示例一：基本上传图片

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传图片</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <form enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">上传</button>
  </form>
  <script>
    $(document).on('submit', 'form', function(event) {
      event.preventDefault();
      var formData = new FormData();
      formData.append('file', this.files[0]);
      $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        success: function() {
          alert('上传成功');
        },
        error: function() {
          alert('上传失败');
        },
        cache: false,
        contentType: false,
        processData: false
      });
    });
  </script>
</body>
</html>

示例二：显示上传进度

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传图片</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <form enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">上传</button>
  </form>
  <div id="progress">
    <div class="progress-bar"></div>
  </div>
  <script>
    $(document).on('submit', 'form', function(event) {
      event.preventDefault();
      var formData = new FormData();
      formData.append('file', this.files[0]);
      $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        xhr: function() {
          var xhr = $.ajaxSettings.xhr();
          if (xhr.upload) {
            xhr.upload.addEventListener('progress', function(event) {
              if (event.lengthComputable) {
                var percent = Math.ceil(event.loaded / event.total * 100);
                $('.progress-bar').width(percent + '%');
              }
            }, false);
          }
          return xhr;
        },
        success: function() {
          alert('上传成功');
        },
        error: function() {
          alert('上传失败');
        },
        cache: false,
        contentType: false,
        processData: false
      });
    });
  </script>
  <style>
    #progress {
      width: 400px;
      height: 20px;
      border: 1px solid #000;
      margin-top: 10px;
      position: relative;
    }
    .progress-bar {
      width: 0;
      height: 100%;
      background-color: #008B8B;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</body>
</html>

这个示例在上传图片的同时，会实时显示上传进度。当用户选择图片之后，会在页面中显示一个进度条，随着上传的进度，进度条也会相应改变。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现上传图片功能 - Python技术站