input file: write the name of the file in a text input with Javascript

I'm learning html and javascript and I wonder if it is possible to do the following: when uploading a file using a file input want the uploaded filename (without path) is written to a file input field .. Is this possible?. Below is my code but can not get any link which explain how to do it for newbies. Sorry if it is a very silly question, but I wonder if you can do only using javascript (not jQuery) and HTML without involving the server.

<html>
    <head>
        <script type="text/javascript">
            (function alertFilename()
            {
                var thefile = document.getElementById('thefile');
        //here some action to write the filename in the input text

            }
        </script>
    </head>
    <body>
        <form>

            <input type="file" id="thefile" style="display: none;"  />
            <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
            <br> <br>The name of the uploaded file is:
            <input type="text" name="some_text" id="some_text" />

        </form>
    </body>
</html>

Answers


Here is a fully working example JavaScript:

var filename;
document.getElementById('fileInput').onchange = function () {
   filename = this.value.split(String.fromCharCode(92));
   document.getElementById("some_text").value = filename[filename.length-1];
};

HTML:

<form>
    <input type="file" id="fileInput" style="display: none;"  />
    <input type="button" value="Browse File..." onclick="document.getElementById('fileInput').click();" />
    <br> <br>The name of the uploaded file is:
    <input type="text" name="some_text" id="some_text" />
</form>

jsFiddle live example

Hope you find it helpful, Asaf


For the newcomers:

document.getElementById("thefile").onchange = function() {
  document.getElementById("some_text").value = this.files[0].name;
};

/* BELOW FULLPATH VERSION (depending on browser)

document.getElementById("thefile").onchange = function () {
document.getElementById("some_text").value = this.value;
};*/
<form>

  <input type="file" id="thefile" style="display: none;" />
  <input type="button" value="Browse File..." onclick="document.getElementById('thefile').click();" />
  <br>
  <br>The name of the uploaded file is:
  <input type="text" name="some_text" id="some_text" />

</form>

Just take the file input' value, split it and take the last index:

Filename = document.getElementById('fileinput').value.split('/') [2];// or the last index returned here since the last index will always be the file name

(Sorry that cant format my answer. I answered by a smartphone)


Need Your Help

$_POST not being read

php html

i have a form which inserts book information into the database. however it is not reading the $_POST attribute.

Clean server infected with c3284d virus, using search and replace

linux bash ubuntu terminal

I'm having an issue with the Notorious c3284d virus. It modifies pretty much all the html/php/js files it can find.