jQuery Get File Info Before Uploading

Learn how to easily get file information before uploading to your web server.

Demo

Get The Code:

<!DOCTYPE html>
<html>

<head>

	<title> Get Audio Duration Time </title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<meta name="description" content="This will show you how to get audio duration time.">

	<meta name="author" content="Code With Mark">
	<meta name="authorUrl" content="http://codewithmark.com">

 
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>


	<script type="text/javascript">

 
	$(document).ready(function()
	{	
		var get_file_data = function (file_obj, cb) 
		{
			var convert_sec_hhmmss = function(secs)
			{
			    var sec_num = parseInt(secs, 10);
			    var hours   = Math.floor(sec_num / 3600) % 24;
			    var minutes = Math.floor(sec_num / 60) % 60;
			    var seconds = sec_num % 60;

			    var time =  [hours,minutes,seconds]
			    .map(function(v1) 
			    {
			    	if( v1 > 0)
			    	{
			    		return v1 < 10 ? "0"+v1 : v1;
			    	} 
			    })
			    .filter(function(v2, i2) 
			    {
			    	if(v2 !== "00" || i2 >0)
			    	{
			    		return v2;
			    	}	
			    })
			    .join(":");

			    return {time_sec:secs,time_formated:time};    
			};

			var convert_file_size = function(file_size_in_bytes)
			{
				var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
				var fSize = file_size_in_bytes; 
				var i=0;
				
				while(fSize>900)
				{
					fSize/=1024;
					i++;
				}
				
				var size_format = (Math.round(fSize*100)/100)+' '+fSExt[i]; 
				
				var r1 = 
				{
					size_bytes:file_size_in_bytes,
					size_type:fSExt[i],
					size_raw:(Math.round(fSize*100)/100),
					size_formated: (Math.round(fSize*100)/100) + ' ' + fSExt[i],
				};

				return r1;
			};

			var container_id = 'temp_file_container';

			var d1 = ''
			+ '<div class="'+container_id+'" style="display:none;">'
			+ '<br>'
			+ '<audio controls class="temp_audio_mp3_container" ></audio>'			
			+ '</div>'
			+  '';
			
			$('body').append(d1);

			var e0 = $(document).find('.' + container_id );
			var e1 = e0.find('.temp_audio_mp3_container');
		 
			e1.attr("src", URL.createObjectURL(file_obj));

			e1.on("canplay", function (e) 
			{ 
				var file_duration = $(this).prop('duration');
				
				var seconds = file_duration;
	   			var s1 = convert_sec_hhmmss(file_duration);

	   			e0.remove();

	   			if (typeof(cb) == 'function')
	   			{
		   			cb(
		   			{
		   				file_obj:file_obj,
		   				file_name:file_obj.name, 
		   				file_type:file_obj.type,
		   				file_duration: convert_sec_hhmmss($(this).prop('duration')),
		   				file_size:convert_file_size(file_obj.size),
		   			});   
		   		}   		
    		});
		};

		
		$(document).on('change', '.mp3_file', function(event) 
		{
			event.preventDefault();

			var el_this = $(this);

			var get_file = $(this).prop('files')[0];

			if(get_file)
			{ 
				get_file_data(get_file, function(data)
				{
					console.log(data);

					//clear file selection value
					el_this.val('');

					var file_type = data.file_type;
					 
					if(file_type.indexOf("audio") > -1)
					{
						$(document).find('.file_audio_video').html('<h4 class="text-left">Step 2 </h4> <audio controls style="width:100%;height:50px;"></audio>');
						$(document).find('.file_audio_video').find('audio').attr("src", URL.createObjectURL(data.file_obj));
					}
					else if(file_type.indexOf("video") > -1)
					{
						$(document).find('.file_audio_video').html('<h4 class="text-left">Step 2 </h4><video controls style="width:100%;height: 350px;""></video>');
						$(document).find('.file_audio_video').find('video').attr("src", URL.createObjectURL(data.file_obj));
					}					
					$(document).find('.file_info').html('<pre class="bg-light" style="padding:10px;">'+JSON.stringify(data, undefined, 5)+'</pre>');					
				});
			}
		}); 			 
	}); 
	</script>

<body> 



<div class="container" style="padding:100px;">
	<h1 class="text-center">Get Audio/Video File Information</h1>
	<br>
	<h3>Step 1 </h3> <small><input type="file" value="" class="mp3_file"> </small>
	
	<br><br>
	<span class="file_audio_video text-center" ></span>

	<br><br>
	<span class="file_info" ></span>
</div>

  
 
</body>

</html>