Question

我正在尝试使用Krajee Bootstrap File Input上传文件。它现在的工作方式是我有一个按钮，当点击它时，打开一个Bootstrap模式对话框，输入文件标签在该模态内。用户单击浏览按钮，选择文件，然后上载文件。所有这一切都很好！

我的问题是如果模态关闭，然后再次重新打开，文件输入控件不再有效。当我单击浏览时，它允许我选择一个文件，但Krajee文件输入控件出错并说：

您必须至少选择一个要上传的文件。

即使我选择了一个文件，但无论如何都会这样说。就像我之前说的那样，它在第一次使用时工作正常，但经过多次使用后，它开始出现错误。我想我的问题是我摧毁和重新创建控件的方式。这是我的模态对话框和文件输入控件html代码：

<div class="modal fade" id="modalUpload" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload Profile Image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="divFileInput">
                    <input id="fileFileUpload" type="file" name="files"/>
                </div>
                <div id="divCropper">
                    <img id="imgCropperPicture" alt="profile" />
                </div>
            </div>
        </div>
    </div>
</div>

这是我的相关客户端代码（它是用TypeScript 2.8编写的）：

   $("#fileFileUpload").fileinput({
        showPreview: true,
        uploadAsync: false,
        uploadUrl: '/fileupload',
        allowedFileExtensions: ['jpg', 'jpeg', 'png'],
        allowedPreviewTypes: ['image'],
        uploadExtraData: { memberId: $("#hidMemberId").val() },
        resizeImage: true,
        theme: 'fa',
        minFileCount: 1,
        maxFileCount: 1,
        dropZoneEnabled: false,
        showRemove: false,
        showUpload: false,
        showCancel: false,
        overwriteInitial: true
    }).on("change", () => {
        $("#fileFileUpload").fileinput(("upload") as any).on("filebatchuploadsuccess", (event, data: any) => {
            this.uploadFinished(data);
        });
    });

    $('#modalUpload').on('hidden.bs.modal', (e) => {
        $("#divCropper").hide();
        $("#divFileInput").show();

        $("#fileFileUpload").fileinput(("clearStack") as any);
        $("#fileFileUpload").fileinput(("clear") as any);
        $("#fileFileUpload").fileinput(("destroy") as any).fileinput({
            showPreview: true,
            uploadAsync: false,
            uploadUrl: '/fileupload',
            allowedFileExtensions: ['jpg', 'jpeg', 'png'],
            allowedPreviewTypes: ['image'],
            uploadExtraData: { memberId: $("#hidMemberId").val() },
            resizeImage: true,
            theme: 'fa',
            minFileCount: 1,
            maxFileCount: 1,
            dropZoneEnabled: false,
            showRemove: false,
            showUpload: false,
            showCancel: false,
            overwriteInitial: true
        }).on("change", () => {
            $("#fileFileUpload").fileinput(("upload") as any).on("filebatchuploadsuccess", (event, data: any) => {
                this.uploadFinished(data);
            });
        });
    });

基本上，我是第一次初始化文件输入控件。 $('#modalUpload').on('hidden.bs.modal' ...)代码是在BootStrap模式关闭时执行的代码。我正在做的是在文件输入控件上调用destroy方法，然后像以前一样重新创建它。

任何帮助实现这项工作的人都将不胜感激！

Answer 1

第一次初始化插件时，它会将监听器附加到 - 在这种情况下 - fileFileUpload 输入。关闭模态时，它会触发输入删除但不会触发侦听器。所以当这一行被触发时：

$("#fileFileUpload").fileinput(("destroy") as any).fileinput ...

实际上它创建了一个新元素并附加了监听器，但旧监听器仍处于活动状态，因此导致程序无法正常工作。

模态关闭时需要删除侦听器。

Answer 2

我似乎为自己想出了这个。如果其他人遇到此问题，问题是因为destroy方法不会删除事件处理程序。所以发生的事情是我的change事件处理程序被调用，但因为#fileFileUpload被销毁，它在控制台窗口中抛出了一个JS错误。所以我要做的就是在调用destroy方法之前添加以下行：

$("#fileFileUpload").off("change");

我在调用destroy方法之前放置了该行，现在一切都按预期工作。

文件输入第二次无法识别文件上传

2 个答案: