Getting the name of a file before it is uploaded

Question

I have a form where I am allowing users to upload files. Well, I am using a regular button that uses javascript to trigger the file uploader, to let users upload their photos. But in doing this, I can no longer show users that they have a file selected (the text that is usually next to the "Select File" button). I was wondering if there was a way to grab that value, say with javascript and display it for the user.

JSFIDDLE: http://jsfiddle.net/YXgPf/1/

This is what I use to prompt the file upload button:

 function getFile(){
  document.getElementById("upfile").click();
 }
 function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("photo-button").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
  }

Answer 1

Something like this will work:

$("input[type=file]").on("change", function (e) {
  var file = e.originalEvent.target.files[0];
  file.name // This will be the file name.
});