html - 在另一个 div 之上显示所选图像

Question

当我选择一张图片时，我可以预览它。但它显示在上传数据 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

代码笔: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 方法取消隐藏 div .show() .

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