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

user_198729 0
Viewed 246362

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?

file html javascript
6 Answers

You can get the file name, but you cannot get the full client file-system path.

Try to access to the value attribute of your file input on the change event.

Most browsers will give you only the file name, but there are exceptions like IE8 which will give you a fake path like: "C:\fakepath\myfile.ext" and older versions (IE <= 6) which actually will give you the full client file-system path (due its lack of security).

document.getElementById('fileInput').onchange = function () {
  alert('Selected file: ' + this.value);
};
CMS_54450

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>
user_28470

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" ....>.

user_36336960

To clean up the C:\fakepath\

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

user_90486860
Related