Getting the name of selected file using JavaScript

Question

Here's the fiddle. I have a project where I am making non-styleable form elements,GitHub, and right now I am making a file input. You can find the source codes at the bottom of the question. I have used opacity: 0; on the input, and put a <span></span> over it. The extra space in the span is for the name of the file selected, but I am trying to think of a way to retrieve the file name using JavaScript or jQuery.

HTML:

<span>Choose File<input type='file'></span>

CSS:

body {
    background: #252525;
    color: #96f226
}
span {
    background: #4a4a4a;
    cursor: pointer;
}
input {
    opacity: 0;
    cursor: pointer;
}

JS/jQuery:

none yet

These sites might be able to help you: developer.mozilla.org/en-US/docs/… and html5rocks.com/en/tutorials/file/dndfiles — user2417483
– user2417483, Commented Sep 7, 2013 at 4:22

guru1206 · Accepted Answer · 2013-09-07 04:33:41Z

Using jQuery, you can bind the onchange event of the file input to a function, and inside that function extract the name of the file.

Here is your html, with some id's for simple jquery access:

<span id="fileText"><input type='file' id="file">Choose File</span>

And some jQuery code:

$("#file").on("change", function()
{
    var value = this.value.split(/[\/\\]/).pop();
    $("#fileText").append(value);
});

Basically, this function will extract the filename from the input (this.value), then select the text after the last slash (directory).

The split() call uses a regexp to split the text into an array at either a forward slash or backward slash (i'm not sure if it is ever a forward slash, but just to be safe). If you just want to split it at the backward slashes, you don't have to use a regular expression, just call split("\"). the pop() returns the last item in the array.

Then, we append this new text to the end of the span.

Collectives™ on Stack Overflow

Getting the name of selected file using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related