How to get file path of an imported image in html5

Question

I'm trying to get the file path of an imported image in html5. My current HTML code is as followed:

<!DOCTYPE HTML>
<html>
    <head>
        <title>example.com</title>
        <link rel="stylesheet" type="text/css" href="Index.css">
    </head>
    <body>
        <h1>Example.com</h1>
        <p>Import image: <input type="file" accept="image/x-png" onclick="importImage()" id="importImg"></p>
        <script src="JS.js"></script>
    </body>
</html>

I dont have any JS code yet as i have literraly no idea how to do it Also no css as i just started this project, but i dont think thats essentiall

Welcome to StackOverflow. Read documentation how forms works in HTML https://www.w3schools.com/html/html_forms.asp — Lixas, Oct 23 '18 at 10:54
use `change` function for your file input and then get file path like `console.log(this.files[0].mozFullPath);` — Arun Kumar, Oct 23 '18 at 10:55
Please see [this link](https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav) — Ahs N, Oct 23 '18 at 10:58
You can not get the full file path in a browser. But, why do you need it? — Curlas, Oct 23 '18 at 11:02

AJAY MAURYA · Answer 1 · 2018-10-23T11:08:50.720

0

I didn't get your question exactly. but i thing you want system path of input type file

Get full path of file from your system.

$('input[type=file]').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
   console.log(tmppath)
});

edited Oct 23 '18 at 11:08

answered Oct 23 '18 at 10:58

AJAY MAURYA

541
3
11

How to get file path of an imported image in html5

1 Answers1