i wrote this code and its working but when i choose image all inputs view the same image not only the one i added the image to ..
<html lang="en">
<head>
<title>Change image on select new image from file input</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<ul>
<li>
<input type="file" name="file" class="profile-img">
<img src="" class="profile-img-tag" width="200px" />
</li>
<li>
<input type="file" name="file" class="profile-img">
<img src="" class="profile-img-tag" width="200px" />
</li>
<li>
<input type="file" name="file" class="profile-img">
<img src="" class="profile-img-tag" width="200px" />
</li>
</ul>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.profile-img-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".profile-img").change(function(){
readURL(this);
});
</script>
</body>
</html>
Just cant make it for every input separatly.
Just change attribute of image that is next to clicked input: