jQuery Get File Info Before Uploading
Learn how to easily get file information before uploading to your web server.
Learn how to easily get file information before uploading to your web server.
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>
