jquery - Drag and Drop photo preview is not worikng -
photo preview not working ,please me
//single photo upload box click //keyvalpimage stores box image in array $(".dzq-img-box ") .on( 'click', this, function() { $('<input type="file" name="files[]" />') .click() .on( "change", function(event) { event .stopimmediatepropagation(); var files = !!this.files ? this.files : []; if (!files.length || !window.filereader) { return false; // no file selected, or no filereader support } if (/^image/ .test(files[0].type)) { // image file var reader = new filereader(); // instance of filereader reader .readasdataurl(files[0]); // read local file reader.onloadend = function() { // set image data background of div $('.dzq-img-box') .each( function( index, element) { if ($( this) .css( 'background-image') == 'none') { var parentofboxiswapp = $( this) .parent(); var imgbox = $(this); $( imgbox) .css( "background-image", "url(" + reader.result + ")"); imgbox .children( '.addicon') .hide(); $( "<div></div>") .addclass( "glyphicon glyphicon-remove-circle") .attr( 'id', 'remove') .prependto( parentofboxiswapp); parentofboxiswapp = null return false; } }); } } }); }); //when remove sign clicked , removes current background-image , copy //and paste next box image if next box has image //removes keyvalpimage stored image $('.dzq-img-wapp') .on( 'click', '#remove', function(e) { e.stoppropagation(); $(this).siblings().css("background-image", ""); $(this).hide(); var remove = $(this); //copy next box image in $('.dzq-img-box') .each( function(index, element) { if ($(this).css( 'background-image') == 'none') { var indexelement = $( '.dzq-img-box').eq( index + 1).css( "background-image"); $('.dzq-img-box').eq( index + 1).css( "background-image", ""); var nextremove = $( '.dzq-img-box').eq( index + 1) nextremove.siblings( "#remove").eq(0) .hide(); $('.dzq-img-box') .eq(index) .css( "background-image", indexelement); //var base64_string=img.replace(/"/g,"").replace(/url\(|\)$/ig, ""); //decodeimg(base64_string); } }); //hides next box x sign $('.dzq-img-box') .each( function(index, element) { if (($(this) .siblings("#remove") .eq(0).is(':hidden')) && ($(this) .css( 'background-image') !== 'none')) { var box = $(this).parent() $("<div></div>") .addclass( "glyphicon glyphicon-remove-circle") .attr('id', 'remove') .prependto(box); } if (($(this).css( 'background-image') == 'none') && ($(this).children() .css('display') == 'none')) { $(this) .children( '.addicon') .show(); } }); }); function draganddrop(file){ $('.dzq-img-box').each(function(index,element){ if($(this).css('background-image') == 'none'){ var box=$(this); if (/^image/.test(file.type)) { // image file var reader = new filereader(); // instance of filereader reader.readasdataurl(file); // read local file reader.onload= function() { $(box).css("background-image","url(" +reader.result + ")"); box.children('.addicon').hide(); $("<div></div>").addclass("glyphicon glyphicon-remove-circle").attr('id','remove').prependto(box.parent()); } } return false; } }); } //drag , drop input click $('.iu-grey-btn').on( 'click', this, function() { $('<input type="file" name="files[]" multiple/>').click().on('change', function(event) { event.stopimmediatepropagation(); var files = this.files ? this.files : []; (var = 0; < files.length; i++) { draganddrop(files[i]); } }); });.movecontainer { padding: 10px 0px 70px 120px; } .dzq-button-panel { position: relative; background-color: #e0e0d1; border-style: dotted; border-color: #c0c0c0; border-width: 2px; margin: 30px; padding-left: 20px; padding-top: 20px; padding-bottom: 120px; margin-bottom: 30px; border-width: 2px; } .dzq-img-wapp { position: relative; background-color: #b3b3b3; float: left; width: 140px; height: 90px; padding: 3px; margin-right: 10px; } .dzq-img-wapp:hover { position: relative; background-color: #c0c0c0; float: left; width: 140px; height: 90px; padding: 3px; margin-right: 10px; } .dzq-img-box { position: relative; float: left; width: 134px; height: 84px; padding-top: 33px; padding-right: 20px; padding-bottom: 20px; padding-left: 55px; margin-right: 0px; background-position: center center; background-size: cover; } .addicon { background: #f2f2f2; padding: 10px; border-radius: 50%; } .glyphicon.glyphicon-cloud-upload { font-size: 50px; position: relative; float: left; left: 10px; } .upload-text { position: relative; left: 25px; } .iu-grey-btn { padding-bottom: 20px; } .inputfile { margin: 0; font-size: 50px; } .glyphicon-remove-circle { position: relative; margin-top: -20px; margin-right: -10px; float: right; font-size: 20px; } .glyphicon-remove-circle:hover { color: #a00000; } .select-editable select { position: absolute; width: 260px; height: 34px; border: 0; } .select-editable input { position: relative; width: 240px; } .imageerror { position: relative; float: left; }<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style> </style> </head> <body style='margin: 30px'> <div class="container"> <div class="movecontainer"> <div class='dzq-button-panel ' style=''> <div class='iu-grey-btn'> <a><span class="glyphicon glyphicon-cloud-upload "></span></a> <div class="upload-text"> <h5>select files upload / drag , drop files</h5> <p>first image product display image</p> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span id='firstimgbox' class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> </div> </div> </div> </body>http://jsbin.com/yofujotedo/edit?html,css,js,output
the problem
that function draganddrop use asynchronous architecture.
it uses filereader object , add preview image in onload function. means when second call second file in list occur, first callback onload not yet done.
the solution
wait next call until current call finished. in solution did recursive can done in many other ways.
//single photo upload box click //keyvalpimage stores box image in array $(".dzq-img-box ") .on( 'click', this, function() { $('<input type="file" name="files[]" />') .click() .on( "change", function(event) { event .stopimmediatepropagation(); var files = !!this.files ? this.files : []; if (!files.length || !window.filereader) { return false; // no file selected, or no filereader support } if (/^image/ .test(files[0].type)) { // image file var reader = new filereader(); // instance of filereader reader .readasdataurl(files[0]); // read local file reader.onloadend = function() { // set image data background of div $('.dzq-img-box') .each( function( index, element) { if ($( this) .css( 'background-image') == 'none') { var parentofboxiswapp = $( this) .parent(); var imgbox = $(this); $( imgbox) .css( "background-image", "url(" + reader.result + ")"); imgbox .children( '.addicon') .hide(); $( "<div></div>") .addclass( "glyphicon glyphicon-remove-circle") .attr( 'id', 'remove') .prependto( parentofboxiswapp); parentofboxiswapp = null return false; } }); } } }); }); //when remove sign clicked , removes current background-image , copy //and paste next box image if next box has image //removes keyvalpimage stored image $('.dzq-img-wapp') .on( 'click', '#remove', function(e) { e.stoppropagation(); $(this).siblings().css("background-image", ""); $(this).hide(); var remove = $(this); //copy next box image in $('.dzq-img-box') .each( function(index, element) { if ($(this).css( 'background-image') == 'none') { var indexelement = $( '.dzq-img-box').eq( index + 1).css( "background-image"); $('.dzq-img-box').eq( index + 1).css( "background-image", ""); var nextremove = $( '.dzq-img-box').eq( index + 1) nextremove.siblings( "#remove").eq(0) .hide(); $('.dzq-img-box') .eq(index) .css( "background-image", indexelement); //var base64_string=img.replace(/"/g,"").replace(/url\(|\)$/ig, ""); //decodeimg(base64_string); } }); //hides next box x sign $('.dzq-img-box') .each( function(index, element) { if (($(this) .siblings("#remove") .eq(0).is(':hidden')) && ($(this) .css( 'background-image') !== 'none')) { var box = $(this).parent() $("<div></div>") .addclass( "glyphicon glyphicon-remove-circle") .attr('id', 'remove') .prependto(box); } if (($(this).css( 'background-image') == 'none') && ($(this).children() .css('display') == 'none')) { $(this) .children( '.addicon') .show(); } }); }); function draganddrop(files, index){ var file = files[index]; if (!file) { return; } $('.dzq-img-box').each(function(index,element){ if($(this).css('background-image') == 'none'){ var box=$(this); if (/^image/.test(file.type)) { // image file var reader = new filereader(); // instance of filereader reader.readasdataurl(file); // read local file reader.onload= function() { $(box).css("background-image","url(" +reader.result + ")"); box.children('.addicon').hide(); $("<div></div>").addclass("glyphicon glyphicon-remove-circle").attr('id','remove').prependto(box.parent()); draganddrop(files, ++index); } } return false; } }); } //drag , drop input click $('.iu-grey-btn').on( 'click', this, function() { $('<input type="file" name="files[]" multiple/>').click().on('change', function(event) { event.stopimmediatepropagation(); var files = this.files ? this.files : []; draganddrop(files, 0); }); });.movecontainer { padding: 10px 0px 70px 120px; } .dzq-button-panel { position: relative; background-color: #e0e0d1; border-style: dotted; border-color: #c0c0c0; border-width: 2px; margin: 30px; padding-left: 20px; padding-top: 20px; padding-bottom: 120px; margin-bottom: 30px; border-width: 2px; } .dzq-img-wapp { position: relative; background-color: #b3b3b3; float: left; width: 140px; height: 90px; padding: 3px; margin-right: 10px; } .dzq-img-wapp:hover { position: relative; background-color: #c0c0c0; float: left; width: 140px; height: 90px; padding: 3px; margin-right: 10px; } .dzq-img-box { position: relative; float: left; width: 134px; height: 84px; padding-top: 33px; padding-right: 20px; padding-bottom: 20px; padding-left: 55px; margin-right: 0px; background-position: center center; background-size: cover; } .addicon { background: #f2f2f2; padding: 10px; border-radius: 50%; } .glyphicon.glyphicon-cloud-upload { font-size: 50px; position: relative; float: left; left: 10px; } .upload-text { position: relative; left: 25px; } .iu-grey-btn { padding-bottom: 20px; } .inputfile { margin: 0; font-size: 50px; } .glyphicon-remove-circle { position: relative; margin-top: -20px; margin-right: -10px; float: right; font-size: 20px; } .glyphicon-remove-circle:hover { color: #a00000; } .select-editable select { position: absolute; width: 260px; height: 34px; border: 0; } .select-editable input { position: relative; width: 240px; } .imageerror { position: relative; float: left; }<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style> </style> </head> <body style='margin: 30px'> <div class="container"> <div class="movecontainer"> <div class='dzq-button-panel ' style=''> <div class='iu-grey-btn'> <a><span class="glyphicon glyphicon-cloud-upload "></span></a> <div class="upload-text"> <h5>select files upload / drag , drop files</h5> <p>first image product display image</p> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span id='firstimgbox' class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> <div class='dzq-img-wapp'> <div class='dzq-img-box'> <span class='addicon'>+</span> </div> </div> </div> </div> </div> </body>
Comments
Post a Comment