Legen Sie Wert auf input / JavaScript

Habe ich Folgendes 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>

Möchte ich, dass nachdem ich die Datei hochladen, der Datei-name wird angezeigt in den tput text, aber das cide nicht funktioniert.

Wie kann ich es beheben?

Update : der name Der Datei sollte innerhalb der input-text -

Ich glaube nicht, Sie sollen mit innerHTML auf input-Elemente

InformationsquelleAutor Nave Tseva | 2013-07-13

2

Bewegen Sie Ihre script element vor dem input element. Sie hatte, besser gesagt die script element in Ihrem head wie diese

Demo

Haben, aktualisieren Sie die Antwort!
- Input-Elemente nicht verwenden innerHTML entweder. Wahrscheinlich wollen value.
- Sie können nicht ändern-Datei-Eingänge aus Gründen der Sicherheit.
- Der name der Datei sollte in sepreat-input-text
- Es immer noch nicht funktionieren, ist der name der Datei nicht in der Eingabe
- wir können den Pfad der Datei form-Datei object-element w3schools.com/jsref/dom_obj_fileupload.asp
- sorry, danke für deine Meinung, die ich haben überprüft den code, und es behoben.
- Sie können überprüfen Sie es jetzt, ich habe gerade vergessen den link aktualisieren, die aktuelle Version ist 3.
- Vielen Dank, jetzt funktioniert es Super!
InformationsquelleAutor Hieu Le

Können Sie versuchen, diesen 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>

InformationsquelleAutor amatellanes

-2

Machen Sie es wie diese:

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]);
};

HTML

JS

DEMO