Hochladen von Dateien, die per AJAX ohne FormData (IE9)

In IE9 FormData wird nicht unterstützt, das macht das hochladen von Dateien mit XMLHttpRequest viel weniger trivial.

Kann das getan werden? Ich habe gesehen, iFrames erwähnt, und während ich bin nicht abgeneigt, zu schreiben, einige haarige code, ich bin an einem Verlust, wie Sie zu erreichen ist (es gibt viele Ressourcen, reden, hochladen auf einen iFrame, aber nicht darüber, wie man die Datei aus dem iFrame auf den server).

Mit Vanille JavaScript (keine Bibliotheken von Drittanbietern), wie würde man das hochladen einer Datei asynchron, ohne die Verwendung von FormData?

  • Die Idee ist, dass Sie post in Ihrem-server über einen iframe. Es ist wirklich kein AJAX beteiligt. Sie kann es so Aussehen, AJAX-like, indem Sie Sie ausblenden, iframe und der Rückkehr einige Infos zu den client über den iframe, wenn die Datei-upload abgeschlossen ist (z.B. der name der Datei und Erfolg-oder-Misserfolg Informationen).
  • da es ohne FileReader (caniuse.com/#feat=filereader), IE9, müssen Sie ein Formular zum senden von Dateien an einen server. der iframe ist nicht erforderlich, aber Sie können fangen die server-Antwort und besser Aussehen, wenn Sie Ihre upload-Antwort ist nicht eine funktionale html-Seite.
  • Könnte als ein Duplikat von stackoverflow.com/questions/7909161/jquery-iframe-file-upload . Mindestens die Antwort ist alles dabei.
InformationsquelleAutor Qix | 2014-11-19
  1. 8

    Dieser code sollte den trick tun. Sorry, war eine lange Zeit her und ich dachte, dass IE9 könnte auch upload mit XHR (Es sollte, aber dies ist die Iframe-option).

    Geschieht Folgendes:

    1. Fügen Sie eine Datei-Eingabe auf Ihrer Seite (auch in HTML)
    2. Setzen, dass die Datei-Selektor in form
    3. fügen Sie Anmeldeinformationen, um die form
    4. Schicken Sie das Formular an iframe und benutzen, seine Seite als Rückgabewert.
    fileSelection  = document.createElement("div");
//create the file input
fileSelection.browseSelect = document.createElement("input");
fileSelection.browseSelect.type = "file";
fileSelection.browseSelect.name = "file[]";
fileSelection.browseSelect.style.display = "block";
fileSelection.browseSelect.style.position = "absolute";
fileSelection.browseSelect.style.left = "50%";
fileSelection.browseSelect.style.top = "auto";
fileSelection.browseSelect.style.height = "36px";
fileSelection.browseSelect.style.width = "36px";
fileSelection.browseSelect.style.bottom = "0px";
fileSelection.browseSelect.style.margin = "0px 0px -1px 90px";  
fileSelection.browseSelect.style.filter = "alpha(opacity=0)";
fileSelection.browseSelect.style.zIndex = 14;

//Put a form in it.
fileSelection.form = document.createElement("form");
fileSelection.form.method = "POST";
fileSelection.form.action = [url to server]; //put your own file upload handler here. 
fileSelection.form.enctype = "multipart/form-data";
fileSelection.form.encoding = "multipart/form-data";
fileSelection.appendChild(fileSelection.form);
//Append the file input to the form.
fileSelection.form.appendChild(fileSelection.browseSelect);

document.body.appendChild(fileSelection);

function doUploadObjectUpload()
{
    var tempFrame = document.createElement("iframe");
    tempFrame.src = "";
    tempFrame.allowTransparancy = "true";
    tempFrame.style.display = "none";
    tempFrame.frameBorder = 0;
    tempFrame.style.backgroundColor = "transparent";
    tempFrame.onload = followUpOnHTML4Upload.bind(this,tempFrame);

    tempFrame.name = "tmpFrameUpload"
    this.appendChild(tempFrame);
    this.form.target = tempFrame.name;
    this.form.name = "uploadForm";
    this.form.acceptCharset = "UTF-8"

    //This is an example of a hidden input, used to pass extra vars to the server. Add more if you need them.
    var tempNodePath = document.createElement("input");
    tempNodePath.type = "hidden";
    tempNodePath.value = [dir]; //if you want specify a target path.
    tempNodePath.name = "filePath";
    this.form.insertBefore(tempNodePath, this.form.childNodes[0]);

    this.form.submit();
}

function followUpOnHTML4Upload(frameId)
{
        //Here you can check the response that came back from the page.
}

    PHP zum Beispiel speichert die Dateien in $_FILES

    • Was ist das für code? Das hat nichts zu tun mit dem, was der Autor wollte.
    • sagen Sie mir bitte, wie das nicht einhalten, was der Autor will (neben der Tatsache, dass er akzeptiert die Lösung).
    InformationsquelleAutor Mouser
Schreibe einen Kommentar