Wie setzt man einen Wert für eine Dateieingabe in HTML fest?

Question

Wie kann ich den Wert davon festlegen?

Answer 1

Sie können es nicht auf einen Pfad des Dateisystems eines Client-Seitendisks setzen, aus Sicherheitsgründen.

Stellen Sie sich vor:

document.foo.submit();

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

Sie können es nur auf eine öffentlich zugängliche Webressource setzen, wie in dieser Antwort zu sehen ist, aber dies ist klarerweise nicht dasselbe wie ein Pfad des Dateisystems eines Client-Seitendisks und daher in diesem Zusammenhang nutzlos.

Answer 2

Sie können es nicht.

Der einzige Weg, den Wert eines Dateieingabe festzulegen, ist durch Auswahl einer Datei durch den Benutzer.

Dies erfolgt aus Sicherheitsgründen. Andernfalls wäre es möglich, ein JavaScript zu erstellen, das automatisch eine bestimmte Datei vom Computer des Benutzers hochlädt.

Answer 3

Keine Antwort auf Ihre Frage (die andere bereits beantwortet haben), aber wenn Sie die Bearbeitungsfunktion eines hochgeladenen Dateifeldes haben möchten, was Sie wahrscheinlich tun möchten, ist:

• den aktuellen Wert dieses Feldes anzeigen, indem Sie einfach den Dateinamen oder die URL ausdrucken, einen anklickbaren Link zum Herunterladen erstellen oder, wenn es sich um ein Bild handelt: nur zeigen, möglicherweise als Miniaturansicht
• Das Tag zum Hochladen einer neuen Datei
• ein Kontrollkästchen, das beim Ankreuzen die aktuell hochgeladene Datei löscht. Beachten Sie, dass es keine Möglichkeit gibt, eine 'leere' Datei hochzuladen, daher benötigen Sie so etwas, um den Wert des Feldes zu löschen

Answer 4

Du kannst das nicht. Und das ist eine Sicherheitsmaßnahme. Stell dir vor, jemand schreibt JS, das den Wert der Dateieingabe auf eine sensible Datei setzt?

Answer 5

Ich habe ein vollständiges Beispiel zum Laden von URLs in eine Eingabedatei und Vorschau geschrieben Sie können hier überprüfen 1 https://vulieumang.github.io/vuhocjs/file2input-input2file/

kurz gesagt, Sie können diese Funktion verwenden

function loadURLToInputFiled(url){
  getImgURL(url, (imgBlob)=>{
    // Laden Sie den Bildblob in die Eingabe
    // WIP: UTF8-Zeichenfehler
    let fileName = 'hasFilename.jpg'
    let file = new File([imgBlob], fileName,{type:"image/jpeg", lastModified:new Date().getTime()}, 'utf-8');
    let container = new DataTransfer(); 
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;

  })
}
// xmlHTTP gibt blob-Antwort zurück
function getImgURL(url, callback){
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
      callback(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}