CODEWITHSUNDEEP
jqueryhtmltextfile-uploadinput
aborted
aborted

Reputation: 4541

jQuery and input[type="file"] 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?

Upvotes: 0

Views: 1268

Answers (2)

Briguy37
Briguy37

Reputation: 8412

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.

Upvotes: 0

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11577

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'));
        });

    });

Upvotes: 1

Related Questions