Change input with image after open image

Question

I have code here :

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

Here is the jsfiddle

What I want is when i'm opening the image to change the content of the div with the image i'm opening... like a preview.

Can anyone help me? Thanks!

http://stackoverflow.com/search?q=%5Bjavascript%5D+preview+image — mplungjan, Dec 15 '16 at 12:03
Not really like this..I want to put the preview instead of the input — Apers1952, Dec 15 '16 at 12:07

score 0 · Accepted Answer · edited May 23 '17 at 11:45

Here

FIDDLE

Please note that if you need to reuse the input field, you need to reset it or the change will not trigger if the same image is chosen

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>

Yeah..it's good here..but I want to have the height and width of the prev box (to be responsive) — Apers1952, Dec 15 '16 at 12:34
There is nothing responsive in resizing the image on the client. But just have the css resize an image in a padding-box or a pic-box depending on which div you fill — mplungjan, Dec 15 '16 at 12:42
I want to where is to put style='width:100%' but it's not working — Apers1952, Dec 15 '16 at 12:44

Change input with image after open image

1 Answers1