Get File Size Before Uploading Using jQuery
In this Get File Size Before Uploading Using jQuery lesson we are gonna learn how to get the file file size and extension before uploading the file to somewhere from somewhere. Here this extension and the file size is important because sometime we may need to restrict some uploads based on the extensions.
So far here we did it with simple two lines of code from the jQuery library. Already we told in our previous lesson the jQuery is an very powerful and more important library for the web developers. Like that in this lesson we need some help of the jQuery library.
In this lesson Get File Size Before Uploading Using jQuery we use the bootstrap for the styling the page. Here we should concentrate the file details, like extension and size of the files.
Create an HTML file and defines the input tag with type equal to file. Consider the following code for put inside the body tag for choose the file and Browse it.
<input type="file" id="upload_file" name='file' onchange="get_detail();";>
And after that, in the above code we call the function named as get_detail() which is also a java script contains the logic to get the file size and the extension.
var extension=$('#upload_file').val().replace(/^.*\./, '');
$("#file_detail").html("File Size : "+size+"bytes"+"("+kb+"Kb)"+ " <br>Extension : "+extension+"");
The above code will help us to get our file size and the extension of the selected files. And the result is showed in the paragraph tag which is append by the java script code.
Here we use the replace function to replace the string before ” and then we show it on the screen. Here we get the selected file size by the size function.
As we told earlier the bootstrap framework is used the jQuery library for some visual effects and some logical functionalities. So here it is easy to use jQuery which is comes with the framework.
And here the final view of the above code is shown below,
We hope the above script will helps you to learn something in the jQuery a legend library. We can explore a lot more about jQuery in the future upcoming lessons.