Datei-Upload ohne Verwendung der Datei Upload-Steuerelement in Javascript

Question

Ich lade eine Datei in meiner Anwendung mit einem HTML-Datei-Upload-Steuerelement jetzt. Anstelle der Kontrolle über das Hochladen von Dateien muss ich beim Auswählen der Checkbox-Steuerelemente die Datei von der lokalen Festplatte holen. Ich verwende JavaScript-Code in meiner Anwendung. Kann mir dabei helfen.

Answer 1

Sie können das FormData Javascript-Objekt https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects verwenden, aber nur moderne Browser werden diesen haben. Für ältere Browser können Sie einen iframe verwenden How to make Asynchronous(AJAX) File Upload using iframe?

Answer 2

Sie können eine versteckte Datei Upload-Steuerelement verwenden und manipulieren Sie es mit JavaScript. Ich verwende den folgenden Code, um dem Benutzer zu ermöglichen, ein Profilbild auszuwählen und es vor dem Hochladen zu sehen. Ich benutze einen Link, aber Sie können es auf eine Checkbox ändern, wie Sie angefordert:

function LoadImage() { 
 
    document.getElementById("ImageFile").click(); 
 
} 
 

 
function DisplayImage(FileBrowser) { 
 
    if (FileBrowser.files.length < 1) 
 
    return; 
 
    var file = FileBrowser.files[0].name; 
 
    if (file == null || file == "") 
 
    return; 
 
    var reader = new FileReader(); 
 
    reader.onload = function() { 
 
    document.getElementById("ImageDisplay").src = this.result; 
 
    }; 
 
    reader.readAsDataURL(FileBrowser.files[0]); 
 
}

<input id="ImageFile" type="file" style="visibility: hidden; height : 0; width: 0;" onchange="DisplayImage(this);" /> 
 
<a href="javascript: void LoadImage();"> 
 
    <img id="ImageDisplay" alt="Select an image" src="" /> 
 
</a>