从输入中提取图像

Question

我有jsfiddle

如果您查看console.log，您会看到img将出现在输入内部，但我想在div.pic-box之后追加图片我该怎么办？

以下是code..jS的一部分：

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

Answer 1

尝试将元素附加到目标的父级：

automaton/3

Answer 2

替换

$(e.target).append("div.pic-box").html(output); 

到

output.appendTo("div.pic-box");

这可能与你的期望相符。

Answer 3

试试这个：

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

  });
});

Fiddle

最好的问候 的Krzysztof

Answer 4

您可以检查父div并添加您的img。

$(this).closest("div").after(output)

请尝试以下：

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

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>