使用Modal BS4进行Dropzone Replace Remove File提示删除确认

时间:2018-11-23 17:05:39

标签: modal-dialog dropzone.js

我尝试使用以下代码通过引导程序的模式确认更改dropzone的pront确认:

模式:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/cpanel-dcv/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301,NC]

RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301

,并使用此脚本将dropzone捕获到删除文件事件并显示模式:

<div class="modal inmodal fade" id="RemoveFileModal" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content animated bounceInRight">
                        <div class="modal-header errormdg">
                            <button type="button" class="close" data-dismiss="modal"><i class="fas fa-window-close text-white"></i><span class="sr-only">Close</span></button>
                            <h4 class="modal-title">Cuidado: Estas Intentando Remover un Archivo.</h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                Por algún motivo el sistema detecto que intentaste Remover un Archivo, Ten en cuenta que el archivo removido no podrás subirlo al sistema.<br> Este aviso es para que tengas en cuenta que si aceptas el archivo que remueves no será guardado en la Aplicación.<br><br>
                                Presiona Aceptar para Remover el archivo y Salir de la pantalla.<br>
                                Presiona Cancelar para Regresar.<br>
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-cls-error" id="outAceptar" data-dismiss="modal">Aceptar</button>
                            <button type="button" class="btn btn-white" data-dismiss="modal">Cancelar</button>
                        </div>
                    </div>
                </div>
            </div>

主要问题是,如果用户单击“接受器”或“取消”,toogle模式不会停止捕获文件事件。接受和取消的西班牙语选项。

该脚本显示模式信息,但继续在后台删除文件。

更新

我尝试了一下,但没有用:

 $('div.dropzone').each(function() {
            $(this).dropzone({
                autoProcessQueue: true,
                url: "/",
                maxFilesize: window.SIS.uploadFiles.size,
                maxFiles: window.SIS.uploadFiles.max,
                acceptedFiles: 'application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                dictDefaultMessage: "<strong>Coloque los archivos Aqui. </strong></br> (Peso Maximo 2Mb, Se Aceptan los Siguientes Formatos: jpg, pdf, xls, xlsx.)",
                addRemoveLinks: true,
                dictCancelUpload: 'Cancelar Subida',
                dictRemoveFile: 'Quitar Archivo',
                clickable: true,
                init: function() {
                    this.on("removedfile", function(data) {
                        var IsRemove = false;
                        $('#RemoveFileModal').modal('toggle').on('click', '#outAceptar', function(e) {
                            IsRemove = true;
                        });
                        return IsRemove;
                    });
                },
            });
        });

1 个答案:

答案 0 :(得分:0)

使用删除的文件事件是一种好方法:

// Called whenever a file is removed.
removedfile: function removedfile(file) {
            $('#yourModalId').modal({
                backdrop: 'static',
                keyboard: false
            })

            $('#yourModalDeleteButton').click({file: file, self: this}, removeFile);

            function removeFile(event)
            {
                $('#yourModalId').modal('hide');
                // user confirmed , remove your file
            }
        },

如您所见,我正在将文件对象和 this 传递给函数,因为您将需要至少一个文件对象来删除文件。 (也许不是,这取决于您处理文件删除的方式)。