'How to get file name when user select a file via <input type="file" />?

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?

javascripthtmlfile


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[3]

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. 

function GetFileSizeNameAndType()
        {
        var fi = document.getElementById('file'); // GET THE FILE INPUT AS VARIABLE.

        var totalFileSize = 0;

        // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
        if (fi.files.length > 0)
        {
            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= fi.files.length - 1; i++)
            {
                //ACCESS THE SIZE PROPERTY OF THE ITEM OBJECT IN FILES COLLECTION. IN THIS WAY ALSO GET OTHER PROPERTIES LIKE FILENAME AND FILETYPE
                var fsize = fi.files.item(i).size;
                totalFileSize = totalFileSize + fsize;
                document.getElementById('fp').innerHTML =
                document.getElementById('fp').innerHTML
                +
                '<br /> ' + 'File Name is <b>' + fi.files.item(i).name
                +
                '</b> and Size is <b>' + Math.round((fsize / 1024)) //DEFAULT SIZE IS IN BYTES SO WE DIVIDING BY 1024 TO CONVERT IT IN KB
                +
                '</b> KB and File Type is <b>' + fi.files.item(i).type + "</b>.";
            }
        }
        document.getElementById('divTotalSize').innerHTML = "Total File(s) Size is <b>" + Math.round(totalFileSize / 1024) + "</b> KB";
    }
    <p>
        <input type="file" id="file" multiple onchange="GetFileSizeNameAndType()" />
    </p>

    <div id="fp"></div>
    <p>
        <div id="divTotalSize"></div>
    </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 Snapshot of a sample output of this code

Solution 4:[4]

To clean up the C:\fakepath\

I add .replace('C:\\fakepath\\', ' ') to replace it with an empty string

Solution 5:[5]

This is based on a comment under the accepted answer, but easiest might be:

$(".fileUploader").on("change", function(e){
   console.log(e.target.files[0].name);
})

Or iterate if you have mutliple file selection enabled on that input. Assumes <input class="fileUploader" ....>.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alex Paulino
Solution 2 John Boker
Solution 3 vibs2006
Solution 4 De Platinum Emirate
Solution 5 logicOnAbstractions

Related Questions