0%

Hey! Do you have any query related to front end?

Sign in Sign up

Show thumbnail on browseBack

Many times it has been found that, most of the person thinks that, if one wanna show thumbnail of image before uploading, then one has to use any server language such as: PHP, .net etc. But gonna show you code which gives you the facility to show thumbnail by jQuery before uploading. It is quiet easy to use. This is performed by new FileReader(); function.

Function works behind:

//Function to show uploaded image thumbnail with two arguments
//1.file input obj  2.DOM in which browsed image will be stored
function readURL(input, showImageIn) {
	var that = input;
	if (input.files && input.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			showImageIn.html('');
			showImageIn.find('img').attr('src', e.target.result);
			showImageIn.find('img').load(function(){
				//Bring image in  middle after browser images load  
				setElementMiddle($('.inputCon span.browse'), $('.inputCon'));	
			});					
		}
		 reader.readAsDataURL(input.files[0]); 
	}
}

new FileReader(); function is used to read content of file. When reading is finished then reader variable stored the content of file in base:64 format, and when reader content gets loaded then, event target result stores in src of image available in imgCon div.

How to call reader function:

//Change event for input type file
$('input[type="file"]').change(function(){
	//store in variable, the Container in which default thumbnail in present
	var showImageBlock = $('.thumbnailCon .imgCon');
		
	//Call readURL function to read uploaded file
	//Pass file input as first argument and container having image as second argument
	readURL(this, showImageBlock);
});

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Simple overlay popup with css3 and jquery

    Visibility hidden and opacity zero, together can beat display none property, which gives height zero during run time.

    • 228
    • 7
    • 228
    • facebook icon
    • twitter icon
    • google plus
  • Side pusher hamburger menu

    Side pusher hamburger menu is a better way put more content on the page.

    • 441
    • 8
    • 441
    • facebook icon
    • twitter icon
    • google plus
  • How to get system ip through jquery or javascript ?

    This is not possible to access the IP address through javascript.

    • 0
    • 1
    • 0
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password