Question

我正在创建脚本以在客户端显示已上传图像的预览，并提供删除它的选项。

我已经完成了所有这些但是UI部分的问题是关闭图标的位置不是右上角对齐。

这是代码和JSfiddle链接，在JSfiddle上测试它，通过浏览按钮添加图像。

＆＃13;

jQuery(function($) {
  $('div').on('click', '.closeDiv', function() {
    $(this).prev().remove();
    $(this).remove();
    $('#upload-file').val("");
  });

  var fileInput = document.getElementById("upload-file");

  fileInput.addEventListener("change", function(e) {

    var filesVAR = this.files;

    showThumbnail(filesVAR);

  }, false);



  function showThumbnail(files) {
    var file = files[0]

    var $thumbnail = $('#thumbnail').get(0);

    var $image = $("<img>", {
      class: "imgThumbnail"
    });
    var $pDiv = $("<div>", {
      class: "divThumbnail",
      style: "float: left"
    });
    var $div = $("<div>", {
      class: "closeDiv",
      style: "float: right"
    }).html('X');

    $pDiv.append($image, $div).appendTo($thumbnail);
    var reader = new FileReader()
    reader.onload = function(e) {
      $image[0].src = e.target.result;
    }
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    $image.on('load', function() {
      ctx.drawImage($image[0], 100, 100);
    })
  }
});

＆＃13;

img {
  width: 30%;
  float: left;
  height: 100px;
  width: 100px;
}
.closeDiv {
  width: 20px;
  height: 21px;
  background-color: rgb(35, 179, 119);
  float: left;
  cursor: pointer;
  color: white;
  box-shadow: 2px 2px 7px rgb(74, 72, 72);
  text-align: center;
  margin: 5px;
}
.pDiv {
  float: left;
  width: 100%
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="image/*" />

＆＃13;

http://jsfiddle.net/r0taz01L/11/

Answer 1

你需要提供

<a href="http://www.example.com" style="position: relative; display: block; width: 163px; height: 163px;">
    <div style="position:absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>
    <iframe style="width: 163px; height: 163px;" scrolling="no" src="http://www.example.com"></iframe>
</a>

和closeDiv to this style

 .divThumbnail {
position: relative;
}

这里是完整的解决方案 http://jsfiddle.net/r0taz01L/12/

如何对齐div位置

1 个答案: