CODEWITHSUNDEEP
jqueryhtml
GenesisTepait
GenesisTepait

Reputation: 73

How to retrieve the path of a file after it is selected using jQuery

I am really new to web development, and I am hoping I could get some insights in this question. So far, I know most browsers does not allow the REAL path of a file to be retrieved using <input type="file"/> but i'll worry about that later, what I am trying to solve right now is that how to ESSENTIALLY retrieve the path (I don't care if it's the real path or fake path) after I choose a file. I can pop-up the file chooser with my code below but I could not get the path after I choose the file.

<button id="btnRestore" >RESTORE</button>
<script>

            $(function(){
                $('#btnRestore').click(function() {
                    var input = $(document.createElement('input')); 
                    input.attr("type", "file");
                    input.trigger('click');


                });

                $('#btnRestore').change(function () {
                    var filePath=$('#btnRestore').val();
                    alert($filepath);
                });

            });

</script>

Upvotes: 1

Views: 60

Answers (1)

user6299088
user6299088

Reputation:

Add onchange and Id attribute to dynamically created element using that you can get the filename .

$(function(){
  $('#btnRestore').click(function() {
      var input = $(document.createElement('input')); 
      input.attr("type", "file");
      input.attr("id", "fileToUpload");
       input.attr("onchange", "fileToUpload(this)");
      input.trigger('click');


  });

});
            
function fileToUpload(data){
        var filename = $(data).val();
    console.log(filename);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnRestore" >RESTORE</button>

Upvotes: 1

Related Questions