Wie setze ich einen Wert für eine Dateieingabe in HTML?

337

Hinweis:

Die folgenden Antworten und Kommentare spiegeln den Status älterer Browser im Jahr 2009 wider. Jetzt können Sie den Wert des Dateieingabeelements 2017 mithilfe von JavaScript und einem dataTransfer- oder FileList-Objekt dynamisch / programmgesteuert festlegen.

In der Antwort in dieser Frage finden Sie Details sowie eine Demo:
Wie wird der Dateieingabewert programmgesteuert festgelegt (dh beim Ziehen von Dateien per Drag & Drop)?

Wie kann ich den Wert festlegen?

<input type="file" />
Alon Gubkin
quelle
3
Ich habe hier eine vollständige referenzierte und aktuelle Antwort (Dezember 2013) dazu gegeben: Dateieingabe merken und neu füllen
GitaarLAB

Antworten:

524

Sie können aus Sicherheitsgründen nicht.

Vorstellen:

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

Sie möchten nicht, dass die von Ihnen besuchten Websites dies tun können, oder? =)

BalusC
quelle
Kannst du es klären? Es nervt mich, dass der Dateiname bei jedem erneuten Besuch gespeichert wird. Pelase siehe stackoverflow.com/questions/41807471/…
Mawg sagt, Monica am
1
Ich verstehe das Sicherheitsproblem, aber sollte der Browser nicht in der Lage sein, zwischen einem gefährlichen lokalen Dateipfad und etwas Unschädlicherem wie einer dataUrl zu unterscheiden? Vielleicht ist es ein Wunschtraum.
Cowlinator
5
Was ist mit der Drag & Drop-Funktion, keine Möglichkeit, diese Datei auf das Eingabefeld zu setzen?
Vedmant
1
@Vedmant Ja, Sie können den Wert des Dateielements mit einem Drag & Drop-Ereignis für andere Elemente festlegen. Siehe So legen Sie den Dateieingabewert programmgesteuert fest (dh beim Ziehen von Dateien)
Samuel Liew
Wenn dies nicht funktioniert, woher weiß dieses Codesegment, wo ich meine Passwörter aufbewahre?
HoldOffHunger
129

Das kannst du nicht.

Die einzige Möglichkeit, den Wert einer Dateieingabe festzulegen, besteht darin, dass der Benutzer eine Datei auswählt.

Dies erfolgt aus Sicherheitsgründen. Andernfalls können Sie ein Javascript erstellen, das automatisch eine bestimmte Datei vom Clientcomputer hochlädt.

Guffa
quelle
51

Keine Antwort auf Ihre Frage (die andere beantwortet haben), aber wenn Sie einige Bearbeitungsfunktionen für ein hochgeladenes Dateifeld haben möchten, möchten Sie wahrscheinlich Folgendes tun:

  • Zeigen Sie den aktuellen Wert dieses Felds an, indem Sie einfach den Dateinamen oder die URL drucken, einen anklickbaren Link zum Herunterladen oder wenn es sich um ein Bild handelt: Zeigen Sie es einfach an, möglicherweise als Miniaturansicht
  • das <input>Tag zum Hochladen einer neuen Datei
  • Ein Kontrollkästchen, das beim Aktivieren die aktuell hochgeladene Datei löscht. Beachten Sie, dass es keine Möglichkeit gibt, eine "leere" Datei hochzuladen. Sie benötigen also etwas Ähnliches, um den Wert des Felds zu löschen
Wim
quelle
1
Ich denke das ist was ich brauche. Wie soll ich das <input type="file" />vorhandene Produktbild festlegen , wenn ich Produktinformationen bearbeiten möchte (das Produktbild nicht ändern möchte) ? Ich kann ein vorhandenes Bild in einem <img />Tag anzeigen, aber wenn ich es abschicke, wird keine Datei übergeben.
Partho63
37

Das kannst du nicht. Und es ist eine Sicherheitsmaßnahme. Stellen Sie sich vor, jemand schreibt ein JS, das den Dateieingabewert in eine vertrauliche Datendatei setzt?

Eimantas
quelle
9

Wie alle anderen hier gesagt haben: Sie können eine Datei nicht automatisch mit JavaScript hochladen.

JEDOCH! Wenn Sie Zugriff auf die Informationen haben, die Sie in Ihrem Code senden möchten (dh nicht passwords.txt), können Sie diese als Blob- Typ hochladen und dann als Datei behandeln.

Was der Server am Ende sieht, ist nicht von jemandem zu unterscheiden, der tatsächlich den Wert von festlegt <input type="file" />. Der Trick besteht letztendlich darin, eine neue XMLHttpRequest () mit dem Server zu beginnen ...

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);

        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');

        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };

        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});

Also, wofür könnten Sie dies möglicherweise verwenden? Ich benutze es zum Hochladen von HTML5-Canvas-Elementen als JPGs. Dies erspart dem Benutzer die Mühe, ein file inputElement öffnen zu müssen , nur um das lokale, zwischengespeicherte Bild auszuwählen, dessen Größe gerade geändert, geändert usw. wurde. Es sollte jedoch für jeden Dateityp funktionieren .

HoldOffHunger
quelle
1

1) Das Problem des Standardwerts in einer Dateieingabe wird NICHT "aus Sicherheitsgründen" ausgeführt, aber die Browser "haben ihn ohne guten Grund einfach nicht implementiert": siehe diesen ausführlichen Bericht

2) Eine einfache Lösung kann darin bestehen, eine Texteingabe über der Dateieingabe zu verwenden, wie hier . Natürlich benötigen Sie Code zum Senden der Datei, wobei Sie jetzt den Wert in der Texteingabe und nicht die Dateieingabe verwenden.

In meinem Fall ist das kein Problem, wenn ich eine HTA-Anwendung mache. Ich verwende überhaupt kein Formular.

msillano
quelle
-4

In HTML definieren:

<input type="hidden" name="image" id="image"/>

In JS:

ajax.jsonRpc("/consulta/dni", 'call', {'document_number': document_number})
    .then(function (data) {
        if (data.error){
            ...;
        }
        else {
            $('#image').val(data.image);
        }
    })

Nach:

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>
djperalta
quelle
-8

Eigentlich können wir es schaffen. Wir können den Standardwert für die Datei festlegen, indem wir das Webbrowser-Steuerelement in c # mithilfe der FormToMultipartPostData-Bibliothek verwenden. Wir müssen diese Bibliothek herunterladen und in unser Projekt aufnehmen. Mit Webbrowser kann der Benutzer innerhalb des Formulars durch Webseiten navigieren. Sobald die Webseite geladen ist, wird das Skript in webBrowser1_DocumentCompleted ausgeführt. Damit,

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
       FormToMultipartPostData postData = 
            new FormToMultipartPostData(webBrowser1, form);
        postData.SetFile("fileField", @"C:\windows\win.ini");
        postData.Submit();
    }

Den Download und die vollständige Referenz finden Sie unter dem folgenden Link.

https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com

uma
quelle
2
Für welche Sprache ist das? Es ist kein Javascript.
John