jquery点击加号多图上传

原创

mob64ca12e01b7d 2023-08-11 19:58:15 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e01b7d的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery点击加号多图上传

引言

在现代的网页设计中，图片上传功能是一个非常常见和重要的功能。用户可以通过上传图片来展示自己的作品、分享照片等。而在实际的应用中，往往需要用户上传多张图片。本文将介绍如何使用jQuery实现点击加号上传多张图片的功能。

什么是jQuery？

在开始介绍具体实现之前，我们先来了解一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库。它方便了HTML文档遍历、事件处理、动画效果和Ajax交互。通过使用jQuery，开发者可以更加高效地操作HTML元素，并且兼容各种浏览器。

实现思路

要实现点击加号上传多张图片的功能，我们可以通过以下步骤来完成：

创建一个表单，用于接收用户上传的图片；
添加一个按钮，当用户点击该按钮时，触发文件选择对话框；
当用户选择了图片文件后，将文件显示到页面上；
用户可以继续点击加号上传更多的图片；
当用户点击提交按钮时，将所有图片文件提交到服务器。

实现代码

下面是一个简单的示例代码，展示了如何使用jQuery实现点击加号多图上传的功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击加号多图上传</title>
  <style>
    .upload-image {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .upload-image img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
    .upload-image input[type="file"] {
      display: none;
    }
    .upload-button {
      width: 100px;
      height: 100px;
      border: 1px dashed #aaa;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #aaa;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form id="upload-form" enctype="multipart/form-data">
    <div class="upload-image">
      <input type="file" name="image" id="image-1">
      <label for="image-1" class="upload-button">+</label>
      <img src="" alt="" id="preview-1">
    </div>
    <div class="upload-image">
      <input type="file" name="image" id="image-2">
      <label for="image-2" class="upload-button">+</label>
      <img src="" alt="" id="preview-2">
    </div>
    <!-- 可以添加更多的上传图片框 -->
    <input type="submit" value="提交">
  </form>

  <script src="
  <script>
    $(document).ready(function() {
      // 给加号按钮绑定点击事件
      $('.upload-button').click(function() {
        $(this).prev().click(); // 触发文件选择对话框
      });

      // 给文件选择框绑定change事件
      $('input[type="file"]').change(function() {
        var file = this.files[0];
        var imageId = $(this).attr('id').replace('image-', '');
        var previewId = '#preview-' + imageId;
        var reader = new FileReader();
        // 读取文件并显示到页面上
        reader.onload = function(e) {
          $(previewId).attr('src', e.target.result);
        };
        reader.readAsDataURL(file);
      });
    });
  </script>
</body>
</html>