拖放照片预览不是万能的

照片预览无效，请帮帮我

//single photo upload with box click //keyValPImage stores the box image in array $(".dzq-img-box ") .on( 'click', this, function() { $('') .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)) { // only image file var reader = new FileReader(); // instance of the FileReader reader .readAsDataURL(files[0]); // read the local file reader.onloadend = function() { // set image data as 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(); $( "
") .addClass( "glyphicon glyphicon-remove-circle") .attr( 'id', 'remove') .prependTo( parentOfboxIsWapp); parentOfboxIsWapp = null return false; } }); } } }); }); //when remove sign is clicked , it removes the current background-image and copy //and paste the next box image if the next box has image //removes the 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 it $('.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 the 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() $("
") .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)) { // only image file var reader = new FileReader(); // instance of the FileReader reader.readAsDataURL(file); // read the local file reader.onload= function() { $(box).css("background-image","url(" +reader.result + ")"); box.children('.addIcon').hide(); $("
").addClass("glyphicon glyphicon-remove-circle").attr('id','remove').prependTo(box.parent()); } } return false; } }); } //Drag and drop input click $('.iu-grey-btn').on( 'click', this, function() { $('').click().on('change', function(event) { event.stopImmediatePropagation(); var files = this.files ? this.files : []; for (var i = 0; i < 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; } 

           
 
 
 
  
 
Select Files to Upload / Drag and Drop Files
 
First image will be product display image
 
 
 
 
 + 
 
 
 
 + 
 
 
 
 + 
 
 
 
 + 
 
 
 
 + 
 
 
 
 
  

Answer 1

问题

函数dragAndDrop使用异步架构。

它使用FileReader对象并在onload函数中添加预览图像。 这意味着当第二次调用列表中的第二个文件时，第一个回调onload尚未完成。

解决方案

等待下一个呼叫，直到当前呼叫结束。 在我的解决方案中，我做了递归，但它可以通过许多其他方式完成。

 //single photo upload with box click //keyValPImage stores the box image in array $(".dzq-img-box ") .on( 'click', this, function() { $('') .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)) { // only image file var reader = new FileReader(); // instance of the FileReader reader .readAsDataURL(files[0]); // read the local file reader.onloadend = function() { // set image data as 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(); $( "
") .addClass( "glyphicon glyphicon-remove-circle") .attr( 'id', 'remove') .prependTo( parentOfboxIsWapp); parentOfboxIsWapp = null return false; } }); } } }); }); //when remove sign is clicked , it removes the current background-image and copy //and paste the next box image if the next box has image //removes the 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 it $('.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 the 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() $("
") .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)) { // only image file var reader = new FileReader(); // instance of the FileReader reader.readAsDataURL(file); // read the local file reader.onload= function() { $(box).css("background-image","url(" +reader.result + ")"); box.children('.addIcon').hide(); $("
").addClass("glyphicon glyphicon-remove-circle").attr('id','remove').prependTo(box.parent()); dragAndDrop(files, ++index); } } return false; } }); } //Drag and drop input click $('.iu-grey-btn').on( 'click', this, function() { $('').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; } 

          
 
 
 
  
 
Select Files to Upload / Drag and Drop Files
 
First image will be product display image
 
 
 
 
 + 
 
 
 
 + 
 
 
 
 + 
 
 
 
 + 
 
 
 
 +