image - 带有上传图像预览的 Magnific Popup

Question

我正在使用 Magnific 弹出窗口显示一个上传表单，用户可以在其中选择多个图像进行上传并在提交表单之前预览它们，我让用户预览图像并在他单击图像下方添加一个输入输入标题和它的替代品，这是我拥有的代码......

(function() {
            if ($("a.uploadMediaImageForm").length) {
                $("a.uploadMediaImageForm").magnificPopup({
                    type: 'inline',
                    preloader: false,
                    closeOnBgClick: false,
                    enableEscapeKey: false,
                    focus: '#name',

                    removalDelay: 500, //delay removal by X to allow out-animation

                    // When elemened is focused, some mobile browsers in some cases zoom in
                    // It looks not nice, so we disable it:
                    callbacks: {
                        beforeOpen: function() {

                            if ($(window).width() < 700) {
                                this.st.focus = false;
                            } else {
                                this.st.focus = '#name';
                            }

                            this.st.mainClass = this.st.el.attr('data-effect');
                        },

                        open: function() {

                            if ($("input#imageUpload").length) {

                                $("input#imageUpload").on('change', function() {

                                    //Get count of selected files
                                    var countFiles = $(this)[0].files.length;

                                    var imgPath = $(this)[0].value;
                                    var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                                    var previewHolder = $("ul.imagePreview");
                                    previewHolder.empty();

                                    if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
                                        if (typeof(FileReader) != "undefined") {

                                            //loop for each file selected for uploaded.
                                            for (var i = 0; i < countFiles; i++) {

                                                var reader = new FileReader();
                                                reader.onload = function(e) {

                                                    $("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
                                                }

                                                previewHolder.show();
                                                reader.readAsDataURL($(this)[0].files[i]);
                                            }

                                        } else {
                                            alert("This browser does not support FileReader.");
                                        }
                                    } else {
                                        alert("Please select only images");
                                    }
                                });
                            } //Image upload preview

                            if($("ul.imagePreview").length) {
                                $("ul.imagePreview").on("click", "li", function(event) {
                                    if($(this).hasClass("selected")) {
                                        $(this).removeClass("selected");
                                        $(this).find("div").remove();
                                    } else {
                                        $(this).addClass("selected");
                                        $(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
                                    }
                                });

                                $("ul.imagePreview").on("click", "div", function(event) {
                                    event.stopPropagation();
                                });
                            }//add form when clicked on an image
                        },

                        beforeClose: function() {
                            // $("ul.imagePreview").empty();
                            var countFiles = "";
                            var imgPath = "";
                            var extension = "";
                            var previewHolder = $("ul.imagePreview");
                            previewHolder.empty();
                        }
                    },

                    midClick: true // allow opening popup on middle mouse click. Always set
                });
            }
        })(); //popup Forms and Uploads

div.uploadPopup {
    width: 80%;
    margin: auto;
    background: white;
    position: relative;
    padding: 40px;
}

label {
    width: 100%;
    margin-bottom: 20px;
    clear: both;
}

ul.imagePreview {
    width: 100%;
    clear: both;
    display: block;
}

ul.imagePreview li {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    max-height: 150px;
    cursor: pointer;
}

ul.imagePreview li.selected {
    max-height: auto;
}

ul.imagePreview li img {
    max-height: 150px;
    display: block;
    margin: auto;
}

<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
<a href="#uploadMediaImageForm" class="uploadMediaImageForm" data-effect="mfp-3d-unfold">Upload Media</a>

<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
    <form action="#">

        <label class="upload">
            <span>Upload Images</span>
            <input id="imageUpload" type="file" multiple>
        </label>

        <ul class="imagePreview">

        </ul>
    </form>
</div>

现在第一次一切正常，但是当我关闭弹出窗口并重新打开它时，图像预览器中发生了错误，它复制了我选择的图像，有时甚至不显示图像，如果它是最后一张图像我在关闭前选择。

我试图在关闭弹出窗口之前设置所有变量并清除图像预览 ul 元素，但这没有帮助。

我需要你们的帮助，我在这里做错了什么？

编辑

我给表单本身一个“fileForm”的ID，并尝试重置整个表单并清空ul.imagePreview，然后用这段代码关闭弹出窗口......

$("#fileForm")[0].reset();
$("ul.imagePreview").empty();

但是仍然没有运气，它仍然复制了我在关闭弹出窗口并再次打开后第二次上传的任何图像!

在这里需要帮助。

Answer 1

您将越来越多的监听器绑定(bind)到同一个事件:

即使弹出窗口关闭，您的表单也始终存在于您的文档中，您大部分时间只是将其隐藏(使用 mfp-hide 类)。

每次打开弹出窗口时，都会调用回调“open”，它将一个函数绑定(bind)到输入的更改事件，并且此回调执行预览操作。

但是如果你打开弹出窗口两次，它会再次将相同的函数绑定(bind)到相同输入上的相同事件。这就是为什么你有重复:代码被调用两次。

将所有绑定(bind)移到回调之外，以便它们完成一次:

 (function() {

    if ($("input#imageUpload").length) {
        $("input#imageUpload").on('change', function() {

            //Get count of selected files
            var countFiles = $(this)[0].files.length;

            var imgPath = $(this)[0].value;
            var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
            var previewHolder = $("ul.imagePreview");
            previewHolder.empty();

            if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
                if (typeof(FileReader) != "undefined") {

                    //loop for each file selected for uploaded.
                    for (var i = 0; i < countFiles; i++) {

                        var reader = new FileReader();
                        reader.onload = function(e) {

                            $("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
                        }

                        previewHolder.show();
                        reader.readAsDataURL($(this)[0].files[i]);
                    }
                } else {
                     alert("This browser does not support FileReader.");
                }
            } else {
                alert("Please select only images");
            }
        });
    } //Image upload preview

    if($("ul.imagePreview").length) {
        $("ul.imagePreview").on("click", "li", function(event) {
            if($(this).hasClass("selected")) {
                $(this).removeClass("selected");
                $(this).find("div").remove();
            } else {
                $(this).addClass("selected");
                $(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
            }
        });

        $("ul.imagePreview").on("click", "div", function(event) {
            event.stopPropagation();
        });
    }//add form when clicked on an image

    if ($("a.uploadMediaImageForm").length) {
        $("a.uploadMediaImageForm").magnificPopup({
            type: 'inline',
            preloader: false,
            closeOnBgClick: false,
            enableEscapeKey: false,
            focus: '#name',

            removalDelay: 500, //delay removal by X to allow out-animation

            // When elemened is focused, some mobile browsers in some cases zoom in
            // It looks not nice, so we disable it:
            callbacks: {
                beforeOpen: function() {

                    if ($(window).width() < 700) {
                        this.st.focus = false;
                    } else {
                        this.st.focus = '#name';
                    }

                    this.st.mainClass = this.st.el.attr('data-effect');
                },

                beforeClose: function() {
                    ///$("ul.imagePreview").empty();
                    var countFiles = "";
                    var imgPath = "";
                    var extension = "";
                    var previewHolder = $("ul.imagePreview");
                    previewHolder.empty();
                    $("#fileForm")[0].reset();
                }
            },

            midClick: true // allow opening popup on middle mouse click. Always set
        });
    }
})(); //popup Forms and Uploads

div.uploadPopup {
    width: 80%;
    margin: auto;
    background: white;
    position: relative;
    padding: 40px;
}

label {
    width: 100%;
    margin-bottom: 20px;
    clear: both;
}

ul.imagePreview {
    width: 100%;
    clear: both;
    display: block;
}

ul.imagePreview li {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    max-height: 150px;
    cursor: pointer;
}

ul.imagePreview li.selected {
    max-height: auto;
}

ul.imagePreview li img {
    max-height: 150px;
    display: block;
    margin: auto;
}

<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
<a href="#uploadMediaImageForm" class="uploadMediaImageForm" data-effect="mfp-3d-unfold">Upload Media</a>

<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
    <form action="#" id="fileForm">

        <label class="upload">
            <span>Upload Images</span>
            <input id="imageUpload" type="file" multiple>
        </label>

        <ul class="imagePreview">

        </ul>
    </form>
</div>