I've seen similar questions before,which ends up with no solution,because of security reasons.
But today I see hostmonster has successfully implemented this,when I open a ticket and attach a file in their backend.
It works both with firefox and IE(version 8 to be exact).
I've verified it's exactly client side scripting,no request is sent(with firebug).
Now,can we re-consider this question?
This question is related to
javascript
html
file
The answer is
just tested doing this and it seems to work in firefox & IE
<html>
<head>
<script type="text/javascript">
function alertFilename()
{
var thefile = document.getElementById('thefile');
alert(thefile.value);
}
</script>
</head>
<body>
<form>
<input type="file" id="thefile" onchange="alertFilename()" />
<input type="button" onclick="alertFilename()" value="alert" />
</form>
</body>
</html>
You can use the next code:
JS
function showname () {
var name = document.getElementById('fileInput');
alert('Selected file: ' + name.files.item(0).name);
alert('Selected file: ' + name.files.item(0).size);
alert('Selected file: ' + name.files.item(0).type);
};
HTML
<body>
<p>
<input type="file" id="fileInput" multiple onchange="showname()"/>
</p>
</body>
I'll answer this question via Simple Javascript that is supported in all browsers that I have tested so far (IE8 to IE11, Chrome, FF etc).
Here is the code.
_x000D_
_x000D_
_x000D_
_x000D_
function GetFileSizeNameAndType()_x000D_
{_x000D_
var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE._x000D_
_x000D_
var totalFileSize = 0;_x000D_
_x000D_
// VALIDATE OR CHECK IF ANY FILE IS SELECTED._x000D_
if (fi.files.length > 0)_x000D_
{_x000D_
// RUN A LOOP TO CHECK EACH SELECTED FILE._x000D_
for (var i = 0; i <= fi.files.length - 1; i++)_x000D_
{_x000D_
//ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE_x000D_
var fsize = fi.files.item(i).size;_x000D_
totalFileSize = totalFileSize + fsize;_x000D_
document.getElementById('fp').innerHTML =_x000D_
document.getElementById('fp').innerHTML_x000D_
+_x000D_
'<br /> ' + 'File Name is <b>' + fi.files.item(i).name_x000D_
+_x000D_
'</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB_x000D_
+_x000D_
'</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";_x000D_
}_x000D_
}_x000D_
document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";_x000D_
} <p>_x000D_
<input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />_x000D_
</p>_x000D_
_x000D_
<div id="fp"></div>_x000D_
<p>_x000D_
<div id="divTotalSize"></div>_x000D_
</p>*Please note that we are displaying filesize in KB (Kilobytes). To get in MB divide it by 1024 * 1024 and so on*.
It'll perform file outputs like these on selecting
Source: Stackoverflow.com