Ввод файла не распознает загрузку файла во второй раз - PullRequest
Новая
       31

Ввод файла не распознает загрузку файла во второй раз

0 голосов
/ 01 июня 2018

Я пытаюсь использовать 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);
            });
        });
    });

Так что в основном яm инициализация управления вводом файла в первый раз.Код $('#modalUpload').on('hidden.bs.modal' ...) - это код, который выполняется, когда модальный BootStrap закрыт.Я вызываю метод destroy для элемента управления вводом файлов, а затем воссоздаю его точно так же, как и раньше.

Буду признателен за любую помощь в получении этой работы!

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Я, кажется, понял это для себя.В случае, если кто-то столкнется с этой проблемой, проблема заключается в том, что метод destroy не удаляет обработчики событий.Так что происходило то, что вызывался мой change обработчик событий, но из-за того, что #fileFileUpload был уничтожен, он выдавал ошибку JS в окне консоли.Поэтому мне нужно было просто добавить строку ниже перед вызовом метода destroy: 

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

Я поместил эту строку перед вызовом метода destroy, и теперь все работает, как и ожидалось.

0 голосов
/ 01 июня 2018

Когда вы в первый раз инициализируете плагин, он присоединит слушателя к - в данном случае - fileFileUpload входу.Когда модальный режим закрыт, он вызывает удаление входа, но не слушателя.И поэтому, когда эта строка запускается: 

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

фактически создает новый элемент и присоединяет прослушиватель, но старый прослушиватель все еще активен, и поэтому ваша программа не работает должным образом.

Вам нужно удалить слушателя, когда модал закрыт.

...