i'm using magnific popup display upload form user can select multiple images upload , preview them before submitting form, let user preview images plus add inputs underneath image when clicks on enter caption , alt it, here's code have ...
(function() { if ($("a.uploadmediaimageform").length) { $("a.uploadmediaimageform").magnificpopup({ type: 'inline', preloader: false, closeonbgclick: false, enableescapekey: false, focus: '#name', removaldelay: 500, //delay removal x allow out-animation // when elemened focused, mobile browsers in cases zoom in // looks not nice, 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 each file selected uploaded. (var = 0; < 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 not support filereader."); } } else { alert("please select 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 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. set }); } })(); //popup forms , uploadsdiv.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>now works fine first time, when close popup , re-open again, wrong happens in image previewer, duplicates images choose , doesn't show image if last image choose before closing.
i tried set variables before closing popup , clear image preview ul element, didn't help.
i need guys, doing wrong here?
edit
i gave form id of "fileform" , tried reset whole form , empty ul.imagepreview before closing popup code ...
$("#fileform")[0].reset(); $("ul.imagepreview").empty(); but still no luck, still duplicated image upload second time after closing popup , opening again !!
need here.
you binding more , more listeners same event:
your form exists in document when popup closed, hide of time (using class mfp-hide).
each time open popup, callback "open" called, bind function change event of input, , callback preview stuff.
but if open popup twice, bind again same function same event on same input. that's why have duplicate: code called twice.
move binding outside callback done once:
(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 each file selected uploaded. (var = 0; < 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 not support filereader."); } } else { alert("please select 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 image if ($("a.uploadmediaimageform").length) { $("a.uploadmediaimageform").magnificpopup({ type: 'inline', preloader: false, closeonbgclick: false, enableescapekey: false, focus: '#name', removaldelay: 500, //delay removal x allow out-animation // when elemened focused, mobile browsers in cases zoom in // looks not nice, 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. set }); } })(); //popup forms , uploadsdiv.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>
Comments
Post a Comment