Get the file name after click open button in file browse dialog box using JavaScript/jQuery

Question

Basically I am new in web development and I'm facing a problem related to open file dialog box using JavaScript or jQuery my problem is that how can I open a file browser dialog box and after clicking open button in the file dialog box get the file path or name in alert() method.

I am using below code for show dialog box in JavaScript

<script type="text/javascript">
    function performClick(node) {
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, false);
        node.dispatchEvent(evt);
        var pathnew = document.getElementById('theFile').value;

    }
</script>

<a href="#" onclick="performClick(document.getElementById('theFile'));">Open file dialog</a>
<input type="file" id="theFile" />

above code shows perfectly file browse dialog box but this alert box show when I click on Open file dialog but I need after clicking Open button which is under the File browse dialog box. Please Help me!

Any help will be appropriated!

GrahamJRoy · Accepted Answer · 2013-09-18 14:51:44Z

4

<form>
    <input type="file">
</form>
<script>
  $(":file").change(function(){
    alert($(":file").val());
  });
</script>

put it on jsfiddle for you here: http://jsfiddle.net/9ytkn/

answered Sep 18, 2013 at 14:51

GrahamJRoy

1,6536 gold badges27 silver badges61 bronze badges

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

3 Comments

Raghu Over a year ago

@JayShukla it gives path as c:\fakepath\<filename>. it will not give full absolute file path. I am also trying for that but not getting.

GrahamJRoy Over a year ago

you need to change your browser settings. This is an added security feature in html5 nextofwindows.com/…

Fares Ayyad Over a year ago

My problem is when i run this code in IE11 it doesn't fire the alert!?!!!

SLaks · Accepted Answer · 2013-09-18 14:21:28Z

1

Just get the value of the <input type="file" />.

answered Sep 18, 2013 at 14:21

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Mentok · Accepted Answer · 2013-09-18 14:24:31Z

0

I think this is right...Should produce a "Browse" button:

<input id="file_field" type="file"></input>

<button type="button" onclick="DisplayFilePath();">Display file path</button>

<script>
function DisplayFilePath(){
    alert($("#file_field").val())
}
</script>

answered Sep 18, 2013 at 14:24

Mentok

5974 silver badges6 bronze badges

Comments

Ahsan Mahboob Shah · Accepted Answer · 2013-09-18 14:27:48Z

0

try this:

<SCRIPT>
    function reverseData(val)       {var d="";var temp="";for (var x=val.length;x>0;x--) {d+=val.substring(x,eval(x-1));}return d;}
    function getFilename(val)       {val=escape(val);var reversedsrc=reverseData(val);var nameEnd=reversedsrc.indexOf('C5%');var name=reversedsrc.substring(0,nameEnd);name=reverseData(name);name=unescape(name);return name;}
    var daname='val';
    document.write('<INPUT TYPE="file" ID="val"><INPUT TYPE="button" VALUE="Get File Name" ONCLICK="alert(getFilename(window.document.getElementById(daname).value))">');
</SCRIPT>

put it into html file and test

answered Sep 18, 2013 at 14:27

Ahsan Mahboob Shah

4,0392 gold badges37 silver badges50 bronze badges

1 Comment

Jay Shukla Over a year ago

Sir thanx for your reply but I need show alert box after clicking Open button which is appear in dialog box.

Collectives™ on Stack Overflow

Get the file name after click open button in file browse dialog box using JavaScript/jQuery

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related