menu

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

●9
calendar_today • schedule1 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.

🔥 Join developers growing publicly
Share your knowledge, build in public, and grow your developer presence with a global community.
Join CoderLegion

More Posts

The Audit Trail of Things: Using Hashgraph as a Digital Caliper for Provenance

Ken W. Algerverified - Apr 28

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

Karol Modelskiverified - Mar 19

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

Greg Elfrink - Jan 14

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

Dharanidharan - Feb 9

How to get radio button value in jquery

Isla Dimitrov - Jan 14
chevron_left
Jakub Narebski
967 Points • 9 Badges
1Posts
12Comments
1Connections
I’m a generalist programmer who enjoys working across different domains and solving practical proble... Show more

Related Jobs

View all jobs →

Commenters (This Week)

5 comments
2 comments
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!