Member 14803832 Ответов: 0

Как обновить тело модального диалога после загрузки файла?


Я делаю сервис, где я изменяю некоторые данные в БД с помощью модального диалога bootstrap. После загрузки файла я показываю его имя в своем модальном диалоговом теле. Но я не могу видеть имя файла, который я только что загрузил, я должен закрыть диалог и открыть его снова, без него я не могу видеть фактическое имя загруженного файла.

Возникает вопрос: как обновить "модальное тело" модального диалога, не закрывая его?

Что я уже пробовал:

Вот мой модальные:

<div class="modal fade" id="editModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="width: 535px">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Edit Event</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">

            <div id="dialog-edit"></div>
            <div id="EditStatus"></div>
            
        </div>
    </div>
</div>


И Javascript:

tab.on("click", ".btnUpload", function (e) {

        var formData = new FormData();
        var id = $(this).closest("tr").find('#fileId').text();
        var file = document.getElementById("FileUpload").files[0];
        formData.append("id", id);
        formData.append("file", file);

        

        $.ajax({
            type: "POST",
            url: "/Events/UpdateJsionFile",
            contentType: false,
            processData: false,
            dataType: "JSON",
            data: formData,
            success: function (data) {
                if (!data.success) {

                    var res = $('<div style="color:red;">' + data.error + '</div>')
                    $('#uploadStatus').html(res);
                    
                }
                else {

                    $('#uploadStatus').html("File #1 uploaded!");
                    
                }
            }

            });


    });


все работает идеально, но я понятия не имею, как обновить данные после загрузки.... Может кто - нибудь помочь мне с этим?

Richard Deeming

Ни один из опубликованных вами Javascript-кодов не имеет ничего общего с модальным диалогом.

Если вы хотите изменить содержимое диалогового окна, вам просто нужно заменить HTML-код в любом из них. dialog-edit или EditStatus элементы.

Member 14803832

Вот в чем дело, я понятия не имею, как я могу обновить, перезагрузить update $('#modal-body') после загрузки файла или, другими словами, после tab.on("click", ".btnUpload", function (e) {...

Member 14803832

После успеха моего ajax я вижу сообщение о том, что мой файл загружен, но есть старое имя файла, и я хочу обновить modal-body, чтобы увидеть фактическое имя файла

F-ES Sitecore

Вы делаете это так же, как обновляете "uploadStatus", используете .html или .text для обновления содержимого соответствующего элемента в вашем модале.

Member 14803832

Это работает, спасибо, но как я могу взять свое имя файла? можно ли взять его из FormData()?

F-ES Sitecore

Из этого

https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file

похоже, что вы можете использовать .files.item(0).name

Member 14803832

Спасибо, это было полезно! теперь он работает идеально!

Member 14803832

thnanks, попробую это сделать и дам свой отзыв.

0 Ответов