1. 技术文章
  2. Drag and Drop photo preview is not worikng

Drag and Drop photo preview is not worikng

由 梦想的初衷 提交于 2019-12-11 06:38:54

问题


Photo preview is not working ,please help me

//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){	
    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();	
          $("<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


回答1:


The problem

That the function dragAndDrop use an asynchronous architecture.

It uses FileReader object and add the preview image in onload function. Which means that the when the second call for the second file in the list occur, the first callback onload not yet done.

The solution

Wait with the next call until the current call finished. In my solution I did it recursive but it can be done in many other ways.

//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){	
    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();	
          $("<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



来源：https://stackoverflow.com/questions/38825110/drag-and-drop-photo-preview-is-not-worikng

标签
jquery
html
drag-and-drop
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!