文件輸入第二次無法識別文件上傳

Question

我正在嘗試使用Krajee Bootstrap 文件輸入來上傳文件。 它現在的工作方式是我有一個按鈕，單擊該按鈕時，會打開一個 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

首次初始化插件時，它將在（在本例中） fileFileUpload輸入上附加一個偵聽器。 關閉模式時，它將觸發輸入刪除，但不會觸發偵聽器。 因此，當觸發此行時：

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

它實際上是在創建一個新元素並附加偵聽器，但是舊的偵聽器仍處於活動狀態，因此導致您的程序無法按預期運行。

模態關閉時，您需要刪除偵聽器。

Answer 2

我似乎自己想辦法。 萬一其他人遇到此問題，則問題是因為destroy方法不會刪除事件處理程序。 所以發生了什么事，就是我的change事件處理程序被調用了，但是因為#fileFileUpload被破壞了，所以它在控制台窗口中#fileFileUpload了JS錯誤。 所以我要做的就是在調用destroy方法之前添加以下行：

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

我在調用destroy方法之前放置了這一行，現在一切正常。

Answer 3

即使沒有模態，我也遇到了同樣的問題。

我現在只是在初始化文件輸入之前調用 destroy 方法。 見提交

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