How to Preview image before upload with dynamic created input file using Jquery

One thing that jQuery makes really easy is accessing and dynamically modifying the image preview before uplload. In popular networking sites such as Facebook and Linkedin, you might have observed the feature called Image Preview. Preview image before upload is a most required feature for file upload functionality. It helps the user to view chosen file and change the image before upload.

HTML Code

<table class="table">
	<tbody id="appendItem">
		<tr id="RemoveData1">
			<td>
				<img data-val="1" id="previewimage1" class="stockimagepreview" src="img/product_image.gif" style="cursor: pointer;height: 60px;width: 60px;position: relative;z-index: 10;">
				<input data-val="1" class="previewimageUploadFile" id="uploadFile1" name="return[1][product_image][]" style="position: absolute; margin: 0px auto; visibility: hidden;" accept="image/*" type="file">
			</td>
		</tr>

		<tr id="RemoveData2">
			<td>
				<img data-val="2" id="previewimage2" class="stockimagepreview" src="img/product_image.gif" style="cursor: pointer;height: 60px;width: 60px;position: relative;z-index: 10;">
				<input data-val="2" class="previewimageUploadFile" id="uploadFile2" name="return[2][product_image][]" style="position: absolute; margin: 0px auto; visibility: hidden;" accept="image/*" type="file">
			</td>
		</tr>
		<tr id="RemoveData3">
			<td>
				<img data-val="3" id="previewimage3" class="stockimagepreview" src="img/product_image.gif" style="cursor: pointer;height: 60px;width: 60px;position: relative;z-index: 10;">
				<input data-val="3" class="previewimageUploadFile" id="uploadFile3" name="return[3][product_image][]" style="position: absolute; margin: 0px auto; visibility: hidden;" accept="image/*" type="file">
			</td>
		</tr>
	</tbody>
</table>

Jquery / JavaScript Code

<script>
	$('#appendItem').delegate('.stockimagepreview','click',function(){
		var id = $(this).attr('data-val');
		$('#uploadFile'+id).click();

	});

	$('#appendItem').delegate('.previewimageUploadFile','change',function(){
		var id = $(this).attr('data-val');
		readURL(this,id);
	});

	function readURL(input,id) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.onload = function (e) {
				$('#previewimage'+id).attr('src', e.target.result);
			}
			reader.readAsDataURL(input.files[0]);
		}
	}
</script>