Question

我有以下JS代码，但无法使用div获得指定的appendTo外观。

如何修复此代码，使其在下面的结果中显示？

$(function(){

  var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
      var filesAmount = input.files.length;
      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          $($.parseHTML('<div class="r_img_con">' + ('<img>'))).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
          $($.parseHTML('<div class="r_img">')).appendTo(placeToInsertImagePreview);
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.al_output_image');
  });

});

测试

<input type="file" name='upload' class="upload" accept="image/*" id="gallery-photo-add" multiple/>
<div class="al_output_image"></div>

当前，我得到：

<div class="r_img_con" src="data:image/...">
  <img>
  </img>
</div>
<div class="r_img"></div>

我正在尝试获取：

<div class="r_img_con">
  <img src="data:image/...">
  <div class="r_img"></div>
</div>

Answer 1

我什至不明白为什么要为此任务使用parseHTML（）...

为了清楚起见，我将解决方案变得有些冗长。

...
reader.onload = function(event) {
      var $firstDiv = $('<div/>',{
        class: 'r_img_con',
      });
      var $img = $('<img/>', {
        src: event.target.result,
      });
      var $subDiv = $('<div/>', {
        class: 'r_img',
      });
      $firstDiv.append($img).append($subDiv).appendTo(placeToInsertImagePreview);
    }
...

如何使用appendTo在div内获取div？

1 个答案: