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

Question

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

我的问题是如果模式关闭，然后再次打开，文件输入控件将不再有效。当我单击浏览时，它让我 select 一个文件，但是 Krajee 文件输入控件出错并显示：

You must select at least 1 file to upload.

即使我 select 一个文件，它还是这么说的。就像我之前说过的，它在第一次使用时工作正常，但在多次使用后，它开始出现该错误。我想我的问题在于我破坏和重新创建控件的方式。这是我的模态对话框和文件输入控件 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 被破坏，它在控制台 window 中抛出一个 JS 错误。所以我要做的就是在调用 destroy 方法之前添加以下行：

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

我在调用 destroy 方法之前放置了该行，现在一切正常。

Answer 3

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

我现在只是在初始化文件输入之前调用 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
    }
);

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

File Input not recognizing file upload 2nd time

javascript

jquery

file-upload

bootstrap-file-upload

typescript2.0