Wie kann ich Dateien asynchron ohne jQuery hochladen und IE6-9 unterstützen?

Question

Ich habe eine einfache Form eine Datei für das Hochladen, die gut genug synchron arbeitet: (ohne die Seite neu zu laden)

<form id="uploadForm" action="/upload" method="post" encType="multipart/form-data"> 
    <input type="file" id="file" name="file" accept=".csv" /> 
    <input type="text" name="comment" /> 
    <button type="submit">Upload</button> 
</form> 

Wie kann ich diese Form die Datei asynchron laden zu machen, und benachrichtigt werden, wenn der Upload abgeschlossen ist und wenn es irgendwelche Fehler gab?

Ich weiß, dass der primäre Weg, eine asynchrone Anforderung zu machen, ist ein XMLHttpRequest zu verwenden, und ich sehe, dass so etwas wie die folgenden jetzt möglich ist (ich habe diesen Code nicht getestet):

function handleLoad() { 
    console.log(this.responseText); 
} 
function handleError(error) { 
    console.error(error.stack); 
} 
function handleSubmit(e) { 
    e.preventDefault(); 
    var form = document.getElementById('uploadForm'); 
    var request = new XMLHttpRequest(); 
    request.addEventListener('load', handleLoad); 
    request.addEventListener('error', handleError); 
    request.open("POST", "/upload"); 
    request.send(new FormData(form)); 
} 

jedoch according to MDN, senden FormData, Blob s, File s oder ArrayBuffer s wird nur in IE10 + unterstützt, und ich möchte eine abwärtskompatible Lösung (die nicht jQuery verwendet).

Es gibt viele Antworten auf How can I upload files asynchronously?, aber alle Antworten, die ich bisher gelesen habe, verwenden jQuery oder verwenden die moderne XMLHttpRequest-Methode, die ich oben beschrieben habe.

Ich benutze React und habe keinen Nutzen für irgendetwas anderes, was jQuery anbietet, also würde ich gerne meine Download-Größe kleiner halten, indem ich das mit Vanille JS lösche.

Answer 1

Der älteste etablierte Weg, dies zu tun ist durch das <form> Ziel ein versteckt Element macht von target="<name of iframe>" zum <form> Elemente hinzugefügt wird. Wenn Sie form.submit() in JavaScript aufrufen, wird die Reaktion im Ziel laden :

<form id="uploadForm" action="/upload" method="post" encType="multipart/form-data" target="asyncFrame"> 
    <iframe id="asyncFrame" name="asyncFrame" height="0" width="0" frameborder="0"></iframe> 
    <input type="file" id="file" name="file" accept=".csv" /> 
    <input type="text" name="comment" /> 
    <button type="submit">Upload</button> 
</form> 

<script> 
    var iframe = document.getElementById('asyncFrame'); 

    function handleLoad() { 
    console.log('response:', iframe.contentWindow.document.body.innerText); 
    } 
    iframe.addEventListener('load', handleLoad); 
</script> 

Die heikelsten an diesem Ansatz ist, gibt es keine Möglichkeit, den Statuscode der Antwort und kein Standard zu erhalten (soweit ich das beurteilen kann), um festzustellen, ob die Anfrage fehlgeschlagen ist. Sie müssen den Antworttext (iframe.contentWindow.document.body.innerText) untersuchen, um festzustellen, ob ein Fehler aufgetreten ist (wenn Sie auf Ihrem eigenen Server veröffentlichen, können Sie glücklicherweise sicherstellen, dass der Antworttext ausreichende Informationen enthält, aber wenn es sich um einen Server eines Drittanbieters handelt Vielleicht hast du kein Glück).