nach offener Bild

Question

Ich habe Code hier:

<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> 

Hier die jsfiddle ist

Was ich will, ist, wenn ich das Bild zu öffnen, den Inhalt des div mit der sich ändern Bild ich öffne ... wie eine Vorschau.

Kann mir jemand helfen? Vielen Dank!

Answer 1

Hier

FIDDLE

Bitte beachten Sie, dass, wenn Sie das Eingabefeld wieder zu verwenden müssen, können Sie es zurücksetzen müssen oder die Änderung wird nicht ausgelöst, wenn das gleiche Bild gewählt wird

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

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

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

<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>