拖放照片预览不是万能的

时间：2016-08-08 09:03:00

标签： jquery html drag-and-drop

照片预览无效，请帮帮我

＆＃13;
＆＃13; 
//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]);
      }
    });
  });
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

http://jsbin.com/yofujotedo/edit?html,css,js,output

enter image description here

1 个答案:

答案 0 :(得分：0)

问题

函数dragAndDrop使用异步架构。

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

解决方案

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

＆＃13;
＆＃13; 
//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);
    });
  });
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

http://output.jsbin.com/jutego

相关问题
最新问题