Retrieve file name from a html file form element using javascript

Question

I have a form element like this:

<form enctype="multipart/form-data" id="uploadform" method="post"  action="upload.php"      target="upload_target" onsubmit="startUpload();">
 <input id="file" name="file" type="file" class="target"/>

The user inputs a file-name - let's say it's "The Beatles - Revolution.mp3". Is there a way I can grab that from the input form element file after they select a file and display it in a DIV?

not from the input, because its value resets after submission. but you can either output it back in the php response in some hidden element or var and grab it from there — Banana
– Banana, Commented Dec 13, 2014 at 18:35

Dimitar Dimitrov · Accepted Answer · 2014-12-13 18:47:19Z

2

I hope I didn't misunderstand, but how about:

$("#songFile").on("change", function(e) {
   var s = $(this).val().split("\\");
   $("#result").text("You've selected - " + s[s.length - 1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="songFile" />
<div id="result"></div>

answered Dec 13, 2014 at 18:47

Dimitar Dimitrov

15.2k9 gold badges55 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

Retrieve file name from a html file form element 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