從輸入中提取圖像

Question

我有jsfiddle

如果您查看 console.log，您會看到 img 將出現在輸入中，但我想在 div.pic-box 之后立即附加圖像，我該怎么辦？

這是代碼的一部分..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

嘗試將元素附加到目標的父級：

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

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

小提琴

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>