jquery - 如何使用 jquery 在 Grid 中显示图像

Question

我正在上传多张图片。我正在一张一张地选择图像并显示图像以供预览。但它以垂直格式显示。我正在尝试以网格格式显示它。请看一看。

var abc=0;
$('#add_more').click(function() {
  $(this).before($("<div/>", {
    id: 'filediv'
  }).fadeIn('slow').append(
    $("<input/>", {
      name: 'file[]',
      type: 'file',
      id: 'file'
    }),
    $("<br/><br/>")
  ));
});

function imageIsLoaded(e) {
  $('#previewimg' + abc).attr('src', e.target.result);
};

$('body').on('change', '#file', function() {
  if (this.files && this.files[0]) {
    abc += 1; //increementing global variable by 1

    var z = abc - 1;
    var x = $(this).parent().find('#previewimg' + z).remove();
    $(this).before("<div id='abcd" + abc + "' class='abcd'><img style='height:100px; width:100px;' id='previewimg" + abc + "' src=''/></div>");

    var reader = new FileReader();
    reader.onload = imageIsLoaded;
    reader.readAsDataURL(this.files[0]);
    src = '<?=ASSET_BASE_URL?>scripts/script.js'
    $(this).hide();
    $("#abcd" + abc).append($("<img/>", {
      id: 'img',
      src: '/assets/x.png',
      alt: 'delete'
    }).click(function() {
      $(this).parent().parent().remove();
    }));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="" method="post">
  Please upload your menu.
  <hr/>
  <div id="filediv" style="width:120px;height=120px;">
    <input name="file[]" type="file" id="file" />
  </div>
  <br/>

  <input type="button" id="add_more" class="btn" value="Add More Menu" />
</form>

标签： jquery

Answer 1

不是最好的解决方案，但它可能会让你走上正确的道路：

var abc=0;
$('#add_more').click(function() {
  $('#thumbs').append($("<div/>", {
    style: 'display:inline-block; vertical-align:top;',
  }).fadeIn('slow').append(
    $("<input/>", {
      name: 'file[]',
      type: 'file',
      id: 'file'
    }),
    $("<br/><br/>")
  ));
});

function imageIsLoaded(e) {
  $('#previewimg' + abc).attr('src', e.target.result);
};

$('body').on('change', '#file', function() {
  if (this.files && this.files[0]) {
    abc += 1; //increementing global variable by 1

    var z = abc - 1;
    var x = $(this).parent().find('#previewimg' + z).remove();
    $(this).before("<div id='abcd" + abc + "' class='abcd'><img style='height:100px; width:100px;' id='previewimg" + abc + "' src=''/></div>");

    var reader = new FileReader();
    reader.onload = imageIsLoaded;
    reader.readAsDataURL(this.files[0]);
    src = '<?=ASSET_BASE_URL?>scripts/script.js'
    $(this).hide();
    $("#abcd" + abc).append($("<img/>", {
      id: 'img',
      src: '/assets/x.png',
      alt: 'delete'
    }).click(function() {
      $(this).parent().parent().remove();
    }));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="" method="post">
  Please upload your menu.
  <hr/>
  <div>
  <div id="thumbs">
    <div style="display:inline-block; vertical-align:top;"><input name="file[]" type="file" id="file" /></div>
  </div>
  <hr/>
  <div>
  <input type="button" id="add_more" class="btn" value="Add More Menu" />
  </div>
  </div>
</form>