Bootstrap5 + js 上传文件操作流程 Model-Toasts综合运用

本文链接：https://blog.youkuaiyun.com/tu_wer/article/details/125654590

一、基本操作流程

1、点击添加图片：弹出模态框（上传图片界面）

2、选择图片文件：会在前后端验证文件类型

3、点击上传按钮：关闭模态框、ajax执行上传操作、接收操作结果

4、弹出Toast信息栏：展示操作结果

在这里插入图片描述

二、代码

1、添加按钮

<!--点击添加按钮只弹出模态框，不执行其它动作-->
<button type="button" 
        class="btn btn-outline-success btn-sm"
        data-bs-toggle="modal" 
        data-bs-target="#uploadImgModal" title="添加图片">
    添加图片
</button>

2、上传界面（模态框）

在这里插入图片描述

<!-- 上传图片模态框 -->
<div class="modal fade" id="uploadImgModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateImgModal-staticBackdropLabel">请上传新图片</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label