Ändern der input-Wert basierend auf einem anderen Eingang der Wert

Sagen wir, ich habe zum Beispiel diesen code:

<input type="file" id="file" name="">
<input class="uploadarea">
<span class="button">Browse</span>

Nun habe ich setupped etwas css zu ändern, die Standard-input-Datei der Schaltfläche suchen, Und die Frage ist jetzt, Wie ändere ich .uploadarea's Wert abhängig vom Wert des #file wenn ich eine Datei auswählen?

Momentan habe ich diesen code, aber ich weiß nicht, was als Nächstes zu tun ist.

var x = document.getElementsByTagName('input');
inputfile = x[0];
textbox = x[1];
  • Was genau möchten Sie tun?
  • Ich möchten, verwenden Sie den filepath in der input[type=file] als der Wert der Eingabe mit einer Klasse uploadarea.
  • Sie können nicht den Pfad einer Datei mit dem file-input-element, nur den Dateinamen.
  • Warum sind Sie mit einer Klasse ? gibt es denn viele davon ?
  • ^nope, Aber einige Elemente haben den gleichen Stil wie diese.
  • Dann, um dies zu erleichtern, müssen Sie wirklich zum hinzufügen einer ID zu der Eingabe, die Sie wollen, um den Wert von cross - browser-Unterstützung für erste Elemente auf Basis der Klasse ist nicht gut ... es sei denn, Sie verwenden so etwas wie jQuery ...

InformationsquelleAutor Jürgen Paul | 2012-02-16
  1. 2

    Hinzufügen eines onchange handler verarbeiten die change Ereignis auf die Datei, Veranstaltung :

    <input type="file" id="file" name="" onchange="something(this.value)">
<input id="somethinghere" class="uploadarea">
<span class="button">Browse</span>

function something(val) {
    document.getElementById('somethinghere').value = val;
}

    Müssen Sie den id Attribut für diese Arbeit

    • Sollte ich diese in den Kopf oder vor </body>?
    • Sie können das Skript in den <head> ist, sowie seine ausgelöste - also nicht unter Berufung auf das DOM bereit
    • Komisch. Der Wert ist undefined.
    • Wenn ich eine Datei ausgewählt, wird der Wert von somethinghere ist jetzt undefined.
    • Aktualisiert - versuchen jetzt
    • Ah, ich sehe. Danke @ManseUK

    InformationsquelleAutor ManseUK
  2. 0

    Ja. Verwenden onchange.
    Und übrigens Lesen alternativen zu onchange-Ereignis in <input type='file' />. Es gibt einige Probleme mit JS-manipulation nach-Datei auswählen.

    InformationsquelleAutor Den
  3. 0

    Einfach jQuery code:

    $('#file').change(function(){
    $('.uploadarea').val(this.value);
});

    Reine Javascript:

    <input type="file" id="file" onchange="foo()" />
<input class="uploadarea" id="other" />

function foo(){
    document.getElementById('other').value = this.value
}
    InformationsquelleAutor gdoron is supporting Monica
Schreibe einen Kommentar