ドラッグ＆ドロップ写真のプレビューが

Question

写真プレビューをworikngされていない機能していない、私を助けてください

//single photo upload with box click 
 
//keyValPImage stores the 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)) { // 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(); 
 
        $(
 
        "<div></div>") 
 
        .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() 
 
      $("<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){ \t 
 
    if($(this).css('background-image') == 'none'){ 
 
     var box=$(this); \t 
 
     if (/^image/.test(file.type)) { // only image file \t \t \t \t \t  
 
     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(); \t 
 
      $("<div></div>").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() { 
 
    $('<input type="file" name="files[]" multiple/>').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; 
 
}

<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 to Upload/Drag and Drop Files</h5> 
 
      <p>First image will be 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

Answer 1

問題

機能dragAndDropが非同期アーキテクチャを使用していること。

FileReaderオブジェクトを使用し、onloadのプレビュー画像を追加します。これは、リスト内の2番目のファイルの2番目の呼び出しが発生したときに、最初のコールバックonloadがまだ実行されていないことを意味します。現在の通話が終了するまで

ソリューションは

は、次の呼び出しを待ちます。私のソリューションでは再帰的でしたが、他の多くの方法で実行できます。

//single photo upload with box click 
 
//keyValPImage stores the 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)) { // 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(); 
 
        $(
 
        "<div></div>") 
 
        .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() 
 
      $("<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){ \t 
 
    if($(this).css('background-image') == 'none'){ 
 
     var box=$(this); \t 
 
     if (/^image/.test(file.type)) { // only image file \t \t \t \t \t  
 
     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(); \t 
 
      $("<div></div>").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() { 
 
    $('<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 to Upload/Drag and Drop Files</h5> 
 
      <p>First image will be 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://output.jsbin.com/jutego