jQuery and input[type="file"] question

Question

My question is quite simple:

I want to store the FILE NAME that I select using file input, and using jQuery I want to put that name somewhere else instantly without having the page refreshed.

Maybe I'd replace a simple text with the filename. How would I do that?

Example:

The text in the beginning: Hello World

After selecting the file, the "Hello World" would be replaced with "my_filename.gif".

Ideas?

Ali Habibzadeh · Accepted Answer · 2011-05-24 21:51:29Z

1

You can save it in data function against the element:

function getFileNameFromPath(path) {
        var ary = path.split("\\");
        return ary[ary.length - 1];
    }

    $(function () {

        $('input[type=file]').change(function () {
            $(this).data(
                'fileName',
                getFileNameFromPath($(this).val())
                );

            alert($(this).data('fileName'));
        });

    });

answered May 24, 2011 at 21:51

Ali Habibzadeh

11.6k4 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Briguy37 · Accepted Answer · 2011-05-25 13:33:25Z

0

Here's a potential solution:

<input type="file" onchange="$('#helloWorld').val($(this).val());"/>
<input id="helloWorld" value="Hello World"/>

You can check it out here

EDIT:

Modified it so the value was set to "Hello World" initially rather than the innerHTML.

edited May 25, 2011 at 13:33

answered May 24, 2011 at 21:42

Briguy37

8,4523 gold badges36 silver badges53 bronze badges

7 Comments

Ali Habibzadeh Over a year ago

Mixing javascript logic in mark-up is bad practice and should be avoided

Briguy37 Over a year ago

@XGreen In general, I agree with you. However, I am a firm believer that it is OK to add JavaScript events to elements in their markup. This makes the event handlers clear when viewing the HTML, and if they are named appropriately, in the JavaScript file as well. If I was doing something more complex, I would have made an onchange function in a JavaScript file and referenced that. However, I think that adds unneeded complexity in this case and makes the connection between the inputs more ambiguous.

Ali Habibzadeh Over a year ago

What happens when you want to change the functionality of a certain element. Or better yet, remove it? Now you have to access two files, remove a function, get rid of the event handler? You need separation. This also allows for improvement on accessibility. You'll be challenged to make your document accessible via the document itself without javascript. HTML should be able to survive on its own without the aid of Javascript (and of course, CSS).

Briguy37 Over a year ago

@XGreen I would say in the case where the element's event handlers may change, you are right that the event declarations should be removed from the HTML to avoid confusion. As to the HTML being able to survive on its own, it will still render the same when the JavaScript events are unavailable, but probably with better JavaScript errors that would help debug why the page is not completely functional.

Briguy37 Over a year ago

@davin Not sure what you are getting at. Is there a good reason to go for "<input ..></input>" over "<input ../>"?

|

Collectives™ on Stack Overflow

jQuery and input[type="file"] question

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related