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

Question

我正在尝试使用Krajee Bootstrap File Input 上传文件。它现在的工作方式是我有一个按钮，单击该按钮会打开一个 Bootstrap 模式对话框，并且输入文件标签位于该模式中。用户单击浏览按钮，选择文件，然后文件被上传。所有这些都很好！

我的问题是如果模式关闭，然后再次重新打开，文件输入控件不再起作用。当我点击浏览时，它让我选择一个文件，但 Krajee 文件输入控件出错并显示：

您必须选择至少 1 个文件进行上传。

即使我选择了一个文件，它还是会这样说。就像我之前所说的，它在第一次使用时运行良好，但在多次使用后，它开始出现该错误。我想我的问题在于我破坏和重新创建控件的方式。这是我的模态对话框和文件输入控件的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

即使没有模态，我也遇到了同样的问题。

我现在只是在初始化文件输入之前调用 destroy 方法。 See commit

$("#file-data").fileinput('destroy');
$("#file-data").fileinput({
    previewFileType: "any",
    uploadUrl: "BLAH",
    maxFileSize: BLAHBLAH
});
$("#file-data").on(
    "fileuploaded",
    function (event, file, previewId, index) {
        DO_SOMETHING
    }
);

Answer 2

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

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

它实际上是在创建一个新元素并附加侦听器，但旧的侦听器仍然处于活动状态，因此导致您的程序无法按预期运行。

模态框关闭时需要移除监听器。

Answer 3

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

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

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