jcadima
1/3/2017 - 7:26 PM

File upload image with max size and file restriction

File upload image with max size and file restriction

new_gist_file.html
content_copyfile_download


https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL



<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title></title>

	<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
 

<input id="filelogo" type="file" ><br>
<img id="showimage" src="" height="200" alt="Image preview..."> 
 
 
</body>



<script>


$("#filelogo").change(function() {
	var preview = document.querySelector('#showimage');
	var file    = document.querySelector('input[type=file]').files[0];
	var reader = new FileReader();

	// console.log(file) ;	
	
    if( $('#filelogo').val() !=""){
	    // readURL function is redundant so we just use reader.onload if the file size is less than 1MB
	    // 'this'  refers to the current file object
	     // check if file size is greater than 1MB OR file is not an image
        if (file.size>=1000000 || file['type'].split('/')[0] !='image'  ) {
	        alert("File Size is more than 1MB OR File is not an image") ;
        }
        else {  
	        
			reader.addEventListener("load", function () {
			    preview.src = reader.result;
			}, false);	        
	           
        
			if ( file ) {   reader.readAsDataURL(file);    }
			   
        }   

    }
    
    /* optional 
    else {
	    // triggers when a file selection is cancelled or there is no image currently selected
	    console.log("File selection cancelled, loading default placeholder.png") ;
	    $('#showimage').attr('src','https://regigo.com/beta/organizer/images/placeholder.png');
	}  
	*/  
    
    
    

});



</script>


</html>