利用FormData,实现上传图片的添加和删除功能

最新推荐文章于 2023-02-12 16:47:59 发布

原创最新推荐文章于 2023-02-12 16:47:59 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#FormData #图片上传 #SpringMvc

前端专栏收录该内容

10 篇文章

订阅专栏

博客介绍基于Bootstrap前端框架的图片上传实现。通过HTML代码创建上传按钮，用JS获取图片对象并复制到新数组以便操作。表单提交时用FormData自定义传递参数，后台使用SpringMvc接收参数，文末还分享了技术学习视频资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于bootstrap前端框架的Html代码如下：

<div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel3">添加列表</h4>
            </div>
            <div class="modal-body">
                <div>
                    <form class="form-horizontal" id="myForm">
                        <div class="form-group">
                            <input type="hidden" name="cid" value="" id="cid3">
                            <input type="hidden" name="lid" value="" id="lid1">
                            <label class="col-sm-3 control-label">列表名：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" placeholder="列表名"
                                       aria-describedby="basic-addon1"
                                       id="nameoflist" name="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">上传图片：</label>
                            <div class="col-sm-9">
                                <input id="fileupload" type="file" name="files" multiple>
                            </div>
                            <div class="col-sm-12" id="pictureList">
                                <table id="uploaded-files" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th style="text-align: center">名称</th>
                                        <th style="text-align: center">图片</th>
                                        <th style="text-align: center">删除</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">
                                    </tbody>
                                    <tfoot id="tfoot">
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="button3" data-dismiss="modal" onclick="addList()">保存</button>
            </div>
        </div>

点击上传图片按钮选择图片后，通过js代码获取files对象，也就是选择的图片对象，在将这些图片对象复制到新的数组，以便后面进行删除和新增的操作，因为files对象本身是无法修改的，所以只能通过这种方式，曲线救国，表单提交时通过FormData来自定义传递参数

js代码：

 // 存储更新所选文件
    var curFiles = [];
    $("#fileupload").change(function () {
        debugger
        let files = this.files;
        if (files && files.length) {
            // 原始FileList对象不可更改，所以将其赋予curFiles提供接下来的修改
            Array.prototype.push.apply(curFiles, files);
        }
        showAllPic(curFiles);
    });
    //tbody展示图片信息
    function showAllPic(arr) {
        debugger
        $("#tbody").empty();
        let piclist = "";
        for (let i = 0; i < arr.length; i++) {
            piclist += "<tr><td width='20%' class='picName1'style='text-align:center;vertical-align:middle'>"+arr[i].name+"</td>"
                +"<td width='70%' style='text-align:center;vertical-align:middle'><img width='100%' height='auto' src="+window.URL.createObjectURL(arr[i])+" /></td>"
                +"<td width='10%' style='text-align:center;vertical-align:middle'><a href='javascript:;' onclick='removePic1(this)'>删除</a></td></tr>"
        }
        $("#tbody").append(piclist);
        $("#fileupload").val("");
    }

    //删除所选图片
    function removePic1(obj) {
        debugger
        let picName = $(obj).parents("tr").find(".picName1").text();
//过滤掉删除的图片
        curFiles = curFiles.filter(function(curFiles) {
            return curFiles.name !== picName;
        });
        showAllPic(curFiles);
    }

 //上传图片
    function addList() {
        let title = $("#nameoflist").val().trim();
        if(title==""){
            alert("列表名不能为空！！")
            return
        }
        let nameList = [];
        $(".picName").each(function (i,n) {
            nameList.push($(n).text());
        });
        if(curFiles.length==0&&nameList.length==0){
            alert("请选择图片！！")
            return
        }
//通过构造FormData来传递参数
        let myForm = new FormData();
        for (let i = 0; i < curFiles.length; i++) {
            myForm.append("curFiles",curFiles[i])
        }
        myForm.append('cid', $("#selectCataloger").val());
        let lid = $("#lid1").val();
        myForm.append('lid', lid);
        myForm.append('title',title);
        myForm.append('nameList',nameList);
        $.ajax({
            url: '/upload',
            dataType: 'json',
            data:myForm,
            type: 'post',
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                
            }
        });
    }

后台SpringMvc接受前端传递的参数：

public class QueryVo {
    private String cid;
    private String lid;
    private String title;
    private List<String> nameList;
    .....
}

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public int upload(QueryVo queryVo, @RequestParam("curFiles") MultipartFile[] uploadFile) {
        //QueryVo接受除图片文件之外的其他普通表单数据， MultipartFile[]用于接收多个图片文件
}

文末分享一些技术学习视频资料：https://pan.baidu.com/s/13dbR69NLIEyP1tQyRTl4xw