批量上传图片_input上传多张图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_45465881/article/details/131383281

前端使用jQuery完成图片的上传，后端使用Java接收图片文件

界面示例

具体实现步骤：

使用HTML和CSS进行页面的布局，并引入jQuery库；
使用三个input标签，类型均为type="file"的标签，并命名好相对应的id，这个id可以命名的有规律些，便于后面的循环赋值，特别说明：input标签中加入multiple属性，则可同时选择多张图片；
在全局中设置好需要上传后存储的图片参数数组，我这里是以上传电商类图片信息为例子，所以用了三个数组，如果需要上传更多类别，请自行添加；
调用jQuery的change方法，将每次上传的图片进行逻辑处理
在界面上进行图片预览，动态的使用jQuery编写显示的逻辑方法，包括一次可以上传多张，上传后隐藏掉上传按钮等逻辑方法；
若需要移除图片，则根据传入的图片id和类型，删除对应的数组中装载的图片参数即可；
使用jQuery调用Ajax方法，将图片信息传入后端，这里需要注意的是，传入的图片参数，具体见下方js代码：

1、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量上传图片</title>
    <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
</head>
<body>
<!--封面图片-->
<div class="level">
    <div class="left-width">
        <label>
            <span class="red">*</span> 封面图片：
        </label>
    </div>
    <div class="right-width">
        <div class="custom-box">
            <div id="topTitle1" class="custom-title hide">
                <div class="custom-count" id="totalImg1">总共0张图片（0.00K）</div>
                <div class="custom-add">
                    <span>继续添加</span>
                    <input type="file" accept="image/*" class="cover-file" data-type="1">
                </div>
            </div>
            <div class="custom-center-title">
                <ul class="custom-ul" id="image1"></ul>
                <div id="showBtn1" class="custom-center">
                    <i class="fa fa-image custom-icon"></i>
                    <div class="custom-file">
                        <span>点击选择图片</span>
                        <input type="file" accept="image/*" class="cover-file" data-type="1">
                    </div>
                    <span class="custom-tips">最多可选择 1 张图片呦~</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--轮播图片-->
<div class="level">
    <div class="left-width">
        <label>
            <span class="red">*</span> 轮播图片：
        </label>
    </div>
    <div class="right-width">
        <div class="custom-box">
            <div id="topTitle2" class="custom-title hide">
                <div class="custom-count" id="totalImg2">总共0张图片（0.00K）</div>
                <div class="custom-add">
                    <span>继续添加