带有上传图片预览的 Magnific Popup

Question

我正在使用 Magnific 弹出窗口显示上传表单，用户可以在其中 select 多张图片上传并在提交表单前预览它们，我让用户预览图片并在下方添加来自输入当他点击它输入标题和 alt 时的图像，这是我的代码 ...

(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>

现在第一次一切正常，但是当我关闭弹出窗口并再次 re-open 时，图像预览器出现问题，它复制了我选择的图像，有时甚至不显示图片，如果它是我在关闭前选择的最后一张图片。

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

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

编辑

我给表单本身指定了一个 ID "fileForm"，并尝试重置整个表单并清空 ul.imagePreview，然后使用此代码关闭弹出窗口 ...

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

但还是不行，关闭弹出窗口再打开后，它仍然复制了我第二次上传的任何图像！！

这里需要帮助。

Answer 1

您正在将越来越多的侦听器绑定到同一事件：

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

每次打开弹出窗口时，都会调用回调 "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

    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>

带有上传图片预览的 Magnific Popup

Magnific Popup with upload image preview

image

file-upload

popup

filereader

magnific-popup

编辑