bootstrap-fileinput 文件上传删除回显完整实例

最新推荐文章于 2022-10-11 10:14:45 发布

置顶

gogo_hua

最新推荐文章于 2022-10-11 10:14:45 发布

阅读量4.9k

点赞数 1

分类专栏： web Java javascript

本文链接：https://blog.csdn.net/yang_best/article/details/105542626

版权

本文介绍如何在Bootstrap-Fileinput中实现文件上传后删除并回显的完整实例，通过递归构建文件输入框解决删除问题，提供HTML、JS代码示例及后台处理方法。

摘要由CSDN通过智能技术生成

bootstrap-fileinput 文件上传非常方便，但连续上传后想删除之前上传的文件，有些复杂。

总体思路是，上传一个文件后，销毁原先的文件输入框，再重新构建文件预览，重新构建需要些技巧，就是递归调用创建文件输入框，否则删除函数会无法调用。中途走了些弯路，最后总算是完成了，希望能给做bootstrap-fileinput 文件上传与删除的开发者有些启示，有更好的实现方法欢迎指导。

hmtl页面代码

<div class="row" id="fileinput-div-id">
                <div class="col-sm-6">
                    <div class="form-group ">
                        <input id="fileIds" name="fileIds" type="text" hidden>
                        <label class="col-sm-3 control-label">附件路径：</label>
                        <div class="col-sm-8">
                            <input id="fileInputProduct" type="file" name="fileInputName" multiple>
                        </div>
                    </div>
                </div>
            </div>

js实现代码

//上传附件
        var uploadFileUrl = ctx + "system/attachment/addAttachment";
        //删除附件
        var deleteFileUrl = ctx + "system/attachment/deleteAttachment";
        // 上传插件参数
        var urlsArr = [], infosArr = [], allowedFileExt = ["txt", "pdf", "xls", "doc"];
        $(function () {
            var needAttacthmentVal = $('input:radio[name="needAttachment"]:checked').val();
            if (needAttacthmentVal == 'N') {
                $("#fileinput-div-id").hide();
            }
            $("#fileInputProduct").fileinput({
                // 'theme': 'explorer-fas',
                uploadUrl: uploadFileUrl,
                //maxFileCount: 3,
                initialPreview: urlsArr,
                initialPreviewAsData: true,
                initialPreviewConfig: infosArr,