and in the form i have two different images and add type=file in each images and hide, so meaning that when click on the image it will prompt the upload form, however, when i clicked on first images under (id= "images_1") and replace with other images and see the preview image is works fine, but in second images (id=" images_2") when i clicked to replace images, it does not replace in second images but it replaced first images.
how can i write the code in jquery to allow me to upload images and preview image on each image when i click on each image!
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#previewHolder').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#images_1").change(function() {
readURL(this);
});
});
form ...
<td width="29%" height="100" align="center" valign="middle">
<?php echo '<div width="36%" align="center">
<img class="product" id="previewHolder" src="' . GW_UPLOADPATH . '/' . $images_1 .'" width="100" height="100" />
<input type="file"
class="uploads"
id="images_1"
name="images_1">
<button >Upload</button>
</td>';
?>
</td>
<td width="29%" height="100">
<?php echo '<div width="36%" align="center">
<img class="product" src="' . GW_UPLOADPATH . '/' . $images_2 .'" width="100" height="100" id="previewHolder" />
<input type="file"
class="uploads"
id="images_2"
name="images_2">
<button>Upload</button>
</div> ';
?>
</td>