Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - No
How can I get the X character in a String using JavaScript?
<!DOCTYPE html> <html> <head> <title>Get File Details</title> </head> <body style="font:15px Calibri;"> <!--ADD INPUT OF TYPE FILE WITH THE MULTIPLE OPTION--> <p> <input type="file" id="file" multiple /> </p> <!--SHOW RESULT HERE--> <p id="fp"></p> <p> <input type="submit" value="Show Details" onclick="FileDetails()" > </p> </body> <script> function FileDetails() { // GET THE FILE INPUT. var fi = document.getElementById('file'); // VALIDATE OR CHECK IF ANY FILE IS SELECTED. if (fi.files.length > 0) { // THE TOTAL FILE COUNT. document.getElementById('fp').innerHTML = 'Total Files: <b>' + fi.files.length + '</b></br >'; // RUN A LOOP TO CHECK EACH SELECTED FILE. for (var i = 0; i <= fi.files.length - 1; i++) { var fname = fi.files.item(i).name; // THE NAME OF THE FILE. var fsize = fi.files.item(i).size; // THE SIZE OF THE FILE. // SHOW THE EXTRACTED DETAILS OF THE FILE. document.getElementById('fp').innerHTML = document.getElementById('fp').innerHTML + '<br /> ' + fname + ' (<b>' + fsize + '</b> bytes)'; } } else { alert('Please select a file.') } } </script> </html>
Using document.getElementById('file'), I am first getting a reference of the input element. The fi.files property has a list of files in the form of an array and therefore I am checking the length (total selected files), to ensure if the user has selected any file. Once confirmed, now you can loop through each file and get the name and size of the file.
Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - No
Two simple methods to get the File size before uploading using JavaScript and jQuery
Note: Safari seems to have a bug. It cannot get the size of multiple files (inside the loop). However, it will get the size of a single selected file.
Well, that’s it.