打开图像后用图像更改输入

Question

我的代码在这里：

<div id="tabs-2" class="tab-content">
  <div class="tab-elements">
    <div class="row">
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
    </div>
  </div>
</div>

以下是jsfiddle

我想要的是当我打开图像以使用我正在打开的图像更改div的内容时...就像预览一样。

任何人都可以帮助我吗？谢谢！

Answer 1

下面

FIDDLE

请注意，如果您需要重复使用输入字段，则需要重置输入字段，否则如果选择相同的图像则不会触发更改

Clearing <input type='file' /> using jQuery

＆＃13;

＆＃13;

$(function() {
  $("input[type=file]").on("change", function(e) {
    var output = $("<img/>", {
      src: URL.createObjectURL(e.target.files[0])
    });
    $(e.target).closest("div.pic-box").html(output)
  });
});

＆＃13;

.fileContainer {
  overflow: hidden;
  position: relative;
}
.fileContainer [type=file] {
  cursor: inherit;
  display: block;
  font-size: 999px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}
.pic-box {
  background-color: blue;
  height: 100px;
  margin-left: 3%;
  margin-top: 3%;
}
.plus-box {
  color: red;
  font-size: 60px;
  text-align: center;
  top: 30px;
}
.padding-box {
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-top: 10px !important;
}
.pic-box img { width:100% }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="tabs-2" class="tab-content">
  <div class="tab-elements">
    <div class="row">
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>
      <div class="col-xs-4 fileContainer padding-box">
        <div class="pic-box">
          <div class="plus-box">xyz</div>
          <input type="file" accept="image/*">
        </div>
      </div>


    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;