Question

当我选择图像时，我可以预览它。但它显示在upload-data div之上。

我想要实现的目标一旦选择图像，图像预览div将显示在上传数据div的顶部？

问题：选择图像后如何才能在上传数据div上显示预览图像？

Codepen DEMO

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <div class="well">
        <div class="upload-info">

          <div class="upload-image"></div><!-- Preview Div-->

          <div class="upload-data">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i>
            <input type="file" class="file-input" />
            <p>Click any where to select file!</p>
          </div><!-- Upload image data-->

        </div><!-- Upload info-->

      </div>
    </div>
  </div>
</div>

CSS

.container {
  margin-top: 20px;
}

.well {
  text-align: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.well .file-input {
  cursor: pointer;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  /*This makes the button huge. If you want a bigger button, increase the font size*/
  font-size: 50px;
  /*Opacity settings for all browsers*/
  opacity: 0;
  -moz-opacity: 0;
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0)
}

.well i {
  font-size: 15rem;
  text-shadow: 10px 10px 10px #646464;
}

.well img {
  width: 100%;
  height: 280px;
}

的jQuery

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('.upload-image img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$(".file-input").change(function(){
    $('.upload-image').append('<img>');
    readURL(this);
});

Answer 1

Codepen：http://codepen.io/anon/pen/bBgxwK

我只是在用户选择文件后隐藏upload-data div。您可以添加取消按钮并取消隐藏用户想要选择其他文件的div。

$(".file-input").change(function(){
    $('.upload-image').append('<img>');
    $('.upload-data').hide(); //Hide the div.
    readURL(this);
});

希望它有所帮助，不要真的知道它是不是你想要的。

修改的

您可以使用jquery方法.show()取消隐藏div。

$('.upload-data').show();

在另一个div的顶部显示所选图像

1 个答案: