Insert value to input / JavaScript

Question

I have the following JS / HTML code:

<input type="text" class="file" name="file_info" id="file_info">
    <div class="file_upload">
        <input type="file" id="file_upload" onchange="name();">
    </div>
<script>
    function name() {
        var fileName = document.getElementById("file_upload").value;
        var fnSplit = fileName.split(/[\/\\]/);
        fileName = fnSplit[fnSplit.length - 1];
      document.getElementById('file_info').innerHTML = 'Fred Flinstone';
    }
</script>

I want that after I upload file, the file-name will shown in the tput text, but this cide doesn't work.

How can I fix it?

Update : The file name should be inside the input text

I don't think you are supposed to use innerHTML on input elements — jonhopkins
– jonhopkins, Commented Jul 13, 2013 at 15:00

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Move your script element before the input element. You had better put the script element inside your head like this

Demo

Have update the answer!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 13, 2013 at 14:59

Hieu Le

8,4351 gold badge36 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Brad Christie Over a year ago

Input elements don't use innerHTML either. Probably want value.

Nave Tseva Over a year ago

The file name should be in sepreat input text

Hieu Le Over a year ago

@Jonathan we can get the file path form file object element w3schools.com/jsref/dom_obj_fileupload.asp

Hieu Le Over a year ago

@BradChristie sorry, thanks for your opinion, I have checked the code and fixed it.

Hieu Le Over a year ago

@NaveTseva You can check it now, I just forget update the link, the current revision is 3.

amatellanes · Accepted Answer · 2013-07-13 15:24:44Z

1

You can try this code:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction()
            {
                var fileName =document.getElementById("file_upload").value;
                var fnSplit = fileName.split(/[\/\\]/);
                fileName = fnSplit[fnSplit.length - 1];

                document.getElementById('file_info').value = fileName
            }
        </script>
    </head>
    <body>

        <input type="text" class="file" name="file_info" id="file_info">
        <div class="file_upload">
            <input type="file" id="file_upload" onchange="myFunction();">
        </div>
    </body>
</html>

answered Jul 13, 2013 at 15:24

amatellanes

3,7352 gold badges19 silver badges19 bronze badges

Comments

Jonathan · Accepted Answer · 2013-07-13 15:16:00Z

-2

Do it like this:

HTML

<div class="file_upload">
    <input type="file" id="file_upload">
</div>
<div id="file_info"></div>

JS

function name(file) {
    var reader = new FileReader();
    reader.readAsText(file);

    reader.onload = function (event) {
        document.getElementById('file_info').innerHTML = "Filename: " + file.name + "\nContent: " + event.target.result;
    };

    reader.onerror = function () {
        alert('Unable to read ' + file.name);
    };
}

document.getElementById('file_upload').onchange = function () {
    name(this.files[0]);
};

DEMO

edited Jul 13, 2013 at 15:16

answered Jul 13, 2013 at 15:10

Jonathan

9,1924 gold badges47 silver badges82 bronze badges

1 Comment

Nave Tseva Over a year ago

The file name should be in sepreat input

Collectives™ on Stack Overflow

Insert value to input / JavaScript

3 Answers 3

5 Comments

Comments

HTML

JS

DEMO

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

HTML

JS

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related