Show a preview image of an HTML5 <input type="file"> selected image file

Question

sorry if question is wrong ,

i want to display particular image in img tag when <input type=file>.

$(':input[type=file]').change( function(event) {
	var tmppath = URL.createObjectURL(event.target.files[0]);
	$(this).closest("img").attr('src',tmppath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file1" name="file1">
    <font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
    <img src="" id="img1" class="img1" height="100px" width="100px"><br>
<input type="file" id="file2" name="file2">
    <font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
    <img src="" id="img2" class="img1" height="100px" width="100px"><br>
<input type="file" id="file3" name="file3">
    <font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
    <img src="" id="img3" class="img1" height="100px" width="100px">

here is my jsfiddle

Answer 1

Try this : You have to use .next() instead of .closest() because next is used to find next element and closest is used to find matching parent element. see below code

$(':input[type=file]').change( function(event) {
	var tmppath = URL.createObjectURL(event.target.files[0]);
	$(this).next("img").attr('src',tmppath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file1" name="file1">
<img src="" id="img1" class="img1" height="100px" width="100px"><br>
<input type="file" id="file2" name="file2">
<img src="" id="img2" class="img1" height="100px" width="100px"><br>
<input type="file" id="file3" name="file3">
<img src="" id="img3" class="img1" height="100px" width="100px">

More Information on .next() and .closest()

EDIT: As OP have changed html structure, I have made some changes in my answer as shown below. make group of input and image elements by putting it into div and make required changes in script.

$(':input[type=file]').change( function(event) {
	var tmppath = URL.createObjectURL(event.target.files[0]);
    //get parent using closest and then find img element
	$(this).closest("div").find("img").attr('src',tmppath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<input type="file" id="file1" name="file1"><br>
<font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
<img src="" id="img1" class="img1" height="100px" width="100px"><br>
</div>
<div>
<input type="file" id="file2" name="file2"><br>
<font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
<img src="" id="img2" class="img1" height="100px" width="100px"><br>
</div>
<div>
<input type="file" id="file3" name="file3"><br>
<font color="#FF0000">For best view upload only <b>200*250</b></font><div class="clear"></div>
<img src="" id="img3" class="img1" height="100px" width="100px">
</div>