jQuery实现input[type=file]多图预览上传删除等功能

题目要求讲解 "jQuery实现input[type=file]多图预览上传删除等功能"，首先我们需要明确一下这个需求具体包括哪些功能：

在页面上添加一个input[type=file]控件，支持上传多张图片
选择图片后，实现图片的预览功能
提供对所选图片进行删除的功能
上传图片到服务器
上传成功后，提示用户上传成功，或者在页面中显示上传后的图片

下面我们逐个来分析这些功能的实现过程。

添加input[type=file]控件

我们可以在页面中添加一个HTML元素：<input type="file" multiple> 。然后使用jQuery选中这个元素，绑定change事件，监听用户选择的图片，得到文件对象之后，我们可以进行后续的操作。

$('input[type=file]').on('change', function(e) {
  var files = e.target.files;
  // 其他功能操作...
});

图片预览功能

一般来说，我们需要将用户选择的图片通过URL.createObjectURL()方法转换成可预览的URL地址。然后，使用<img>标签来显示图片。

var preview = function(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var img = document.createElement('img');
    img.src = URL.createObjectURL(file);
    img.onload = function() {
      URL.revokeObjectURL(this.src);
    }
    $('.preview').append(img);
  }
}

然后，在页面上添加一个容器，供用户预览图片。

<div class="preview"></div>

删除图片功能

如果要实现删除图片，我们需要在每个图片的下方添加一个"删除"按钮。当用户点击这个按钮时，首先要从页面上删除这张图片。然后，我们需要维护一个数组，记录当前选中的所有图片文件对象。

var removeItem = function(img) {
  // 从页面上删除元素
  $(img).remove();
  // 从数组中删除元素
  var index = selected.indexOf(img.file);
  selected.splice(index, 1);
}

其中，selected是一个数组，用来保存选中的文件对象。

上传图片到服务器

我们使用FormData对象来模拟表单，然后使用ajax方法来异步提交上传。

var upload = function(files) {
  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
    formData.append('files[]', files[i]);
  }

  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      console.log('上传成功:', response);
    }
  });
}

其中，/upload是服务器端处理上传的接口地址。

完整实例

下面我们来看一个完整的实现示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现input[type=file]多图预览上传删除等功能</title>
  <style>
    .preview { display: flex; flex-wrap: wrap; }
    .preview img { width: 100px; height: 100px; margin: 10px; }
    .preview button { margin-left: 10px; }
  </style>
</head>
<body>
  <input type="file" multiple>
  <div class="preview"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      var selected = [];

      function preview(files) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          var img = document.createElement('img');
          img.src = URL.createObjectURL(file);
          img.onload = function() {
            URL.revokeObjectURL(this.src);
          }
          $('.preview').append(img);
          img.file = file;
          selected.push(file);
          $(img).after(`<button type="button" class="remove">删除</button>`);
        }

        $('.remove').on('click', function(e) {
          e.preventDefault();
          var img = e.target.previousElementSibling;
          removeItem(img);
        });
      }

      var removeItem = function(img) {
        $(img).next().remove();
        $(img).remove();
        var index = selected.indexOf(img.file);
        selected.splice(index, 1);
      }

      $('input[type=file]').on('change', function(e) {
        var files = e.target.files;
        preview(files);
      });

      $('form').on('submit', function(e) {
        e.preventDefault();
        upload(selected);
      });

      var upload = function(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,
          success: function(response) {
            console.log('上传成功:', response);
          }
        });
      }
    });
  </script>
</body>
</html>

这个示例包含了基本的上传图片、预览图片和删除图片的功能。当用户选择完图片后，可以通过点击"删除"按钮删除选中的图片，也可以点击"上传"按钮将选中的图片上传到服务器。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现input[type=file]多图预览上传删除等功能 - Python技术站