Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

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

by
Category:javascript
codeigniter mysql javascript jquery html
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.

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

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>

0 Comments


Html code work in comment box


Related Post