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

Question

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.

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.