How to get full path of uploaded file in html using JavaScript

Leader posted 2 min read

We know java Script refers to a client side scripting language. In case we consider you are trying to get the users system folder path. Basically you can’t do this. It is barely allowed to fetch the directory structure or path.

z13

Photo by Rachel Vine
TABLE OF CONTENTS
  1. Step 01 - Absolute path of a file
  2. Step 02 - JavaScript to get the full path of file:
  3. Step 03 - Store the value of the JavaScript variable image Path in the MySQL database
  4. Conclusion

Absolute path of a file:

If you wish to get the absolute path of a file you can choose the jQuery attr() method. In addition, in the web page a file such as image, pdf, docs is display by giving its path to src attribute of an element. Now, you need to control that element’s id or class. After that usage the .attr() method to catch the src value.

Code:

var absolutePath=$("elementId").attr("src");

In case you are able to catch absolute path as:

/dir1/pdf/grapes.pdf

Later on, you need to add the domain URL before of it because ‘/’ explains the root directory for the domain.

JavaScript to get the full path of file:

Try this code:

    
    

Next step set this JavaScript function within the head tags. The forms on submit value set the function name as well.


    
    function getPath() {
        var inputName = document.getElementById('file1');
        var imgPath;

        imgPath = inputName.value;
        alert(imgPath);
    }
    


    
    ...
    

Store the value of the JavaScript variable image Path in the MySQL database:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    
    This is a test
    
    function getPath() {
    var Form = document.forms['frm_upload'];
    var inputName = Form.elements['file1'].value;

    var imgPath = inputName;
    Form.elements['file_src'].value = imgPath;
    }
    
    

    
    " onSubmit="getPath();">
    
<?php echo stripslashes($_POST["file_src"]); ?>

Conclusion

Hope it helped.

More Posts

I’m a Senior Dev and I’ve Forgotten How to Think Without a Prompt

Karol Modelskiverified - Mar 19

How I Built a React Portfolio in 7 Days That Landed ₹1.2L in Freelance Work

Dharanidharan - Feb 9

How to solve this problem "Uncaught TypeError: $(...).datetimepicker is not a function"

Greg Elfrink - Jan 14

How to get radio button value in jquery

Isla Dimitrov - Jan 14

How to display HTML form values on the same page after submission using JavaScript

Muzzamil Abbas - Feb 17, 2024
chevron_left

Related Jobs

View all jobs →

Commenters (This Week)

1 comment
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!