Kann ich den folgenden jQuery-Code verwenden, um das Hochladen von Dateien mithilfe der POST-Methode einer Ajax-Anforderung durchzuführen?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
Wenn es möglich ist, muss ich ein data
Teil füllen ? Ist es der richtige Weg? Ich poste die Datei nur auf der Serverseite.
Ich habe herum gegoogelt, aber was ich gefunden habe, war ein Plugin, während ich es in meinem Plan nicht verwenden möchte. Zumindest für den Moment.
javascript
jquery
ajax
post
file-upload
Willy
quelle
quelle
Antworten:
Das Hochladen von Dateien ist über AJAX
nichtmöglich.Sie können eine Datei hochladen, ohne die Seite mit zu aktualisieren
IFrame
.Weitere Details können Sie hier überprüfen .
AKTUALISIEREN
Mit XHR2 wird das Hochladen von Dateien über AJAX unterstützt. ZB durch
FormData
Objekt, aber leider wird es nicht von allen / alten Browsern unterstützt.FormData
Die Unterstützung beginnt mit den folgenden Versionen des Desktop-Browsers.Weitere Informationen finden Sie unter MDN-Link .
quelle
enctype
auf"form/multipart"
!Iframes werden nicht mehr zum Hochladen von Dateien über Ajax benötigt. Ich habe es kürzlich selbst gemacht. Schauen Sie sich diese Seiten an:
Verwenden von HTML5-Datei-Uploads mit AJAX und jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Die Antwort wurde aktualisiert und bereinigt. Verwenden Sie die Funktion getSize, um die Größe zu überprüfen, oder verwenden Sie die Funktion getType, um die Typen zu überprüfen. Progressbar HTML- und CSS-Code hinzugefügt.
Verwendung der Upload-Klasse
HTML-Code für den Fortschrittsbalken
Progressbar CSS-Code
quelle
writer(catchFile)
. Was istwriter()
?Ajax Post- und Upload-Datei ist möglich. Ich benutze die
jQuery $.ajax
Funktion, um meine Dateien zu laden. Ich habe versucht, das XHR-Objekt zu verwenden, konnte jedoch mit PHP keine Ergebnisse auf der Serverseite erzielen.Wie Sie sehen können, müssen Sie ein FormData-Objekt erstellen, leer oder aus (serialisiert? -
$('#yourForm').serialize())
vorhandenem Formular), und dann die Eingabedatei anhängen.Weitere Informationen: - Hochladen einer Datei mit jQuery.ajax und FormData - Hochladen von Dateien über jQuery, Objekt FormData wird bereitgestellt und kein Dateiname, GET-Anforderung
Für den PHP-Prozess können Sie Folgendes verwenden:
quelle
formData.append('file', $('#file')[0].files[0]);
kehrt zurückundefined
undconsole.log(formData)
hat nichts außer_proto_
var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
Einfaches Upload-Formular
quelle
Ich bin ziemlich spät dran, aber ich habe nach einer Ajax-basierten Lösung zum Hochladen von Bildern gesucht und die Antwort, nach der ich gesucht habe, war in diesem Beitrag irgendwie verstreut. Die Lösung, für die ich mich entschieden habe, betraf das FormData-Objekt. Ich habe eine Grundform des Codes zusammengestellt, den ich zusammengestellt habe. Sie können sehen, wie Sie mit fd.append () ein benutzerdefiniertes Feld zum Formular hinzufügen und wie Sie mit Antwortdaten umgehen, wenn die Ajax-Anforderung abgeschlossen ist.
HTML hochladen:
Wenn Sie mit PHP arbeiten, finden Sie hier eine Möglichkeit, den Upload zu handhaben. Dazu gehört die Verwendung der beiden im obigen HTML-Code gezeigten benutzerdefinierten Felder.
Upload.php
quelle
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
verstehe , warum das so ist, Sir, ich kopiere,file://
, anstatt einen Webserver zu verwenden? Abgesehen davon ist es nicht empfehlenswert, Code einfach blind zu kopieren und einzufügen, ohne ihn vorher zu verstehen. Ich würde empfehlen, dass Sie den Code Zeile für Zeile durchgehen, um zu verstehen, was passiert, bevor Sie den Code verwenden.Ein AJAX-Upload ist in der Tat mit möglich
XMLHttpRequest()
. Keine iframes notwendig. Der Upload-Fortschritt kann angezeigt werden.Weitere Informationen finden Sie unter: Beantworten Sie https://stackoverflow.com/a/4943774/873282 , um den Fortschritt des jQuery-Uploads und das Hochladen der AJAX-Datei in Frage zu stellen .
quelle
So habe ich das zum Laufen gebracht:
HTML
JS
PHP
quelle
$('#file')[0].files[0]
seltsame JS-Problemumgehung, ohne dass eine ordnungsgemäße<form>
Für den Fall, dass Sie es so machen möchten:
als
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
könnte Ihre Lösung sein.
quelle
Weitere Details zu meinem Blog-Beitrag: http://blog.manki.in/2011/08/ajax-fie-upload.html .
quelle
Bearbeiten: Inhaltstyp und Prozessdaten notieren Sie können dies einfach verwenden, um Dateien über Ajax hochzuladen. Die Eingabe kann nicht außerhalb des Formularelements erfolgen :)
quelle
Update 2019:
html
js
views.py
quelle
Verwenden Sie FormData. Es funktioniert wirklich gut :-) ...
quelle
Ich habe eine Auswahl mehrerer Dateien mit sofortiger Vorschau und Upload implementiert, nachdem unerwünschte Dateien über Ajax aus der Vorschau entfernt wurden.
Eine ausführliche Dokumentation finden Sie hier: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/
Javascript:
quelle
Ich habe diese in einem einfachen Code behandelt. Sie können eine Arbeits Demo Download von hier
Für Ihren Fall sind diese sehr gut möglich. Ich werde Ihnen Schritt für Schritt zeigen, wie Sie mit AJAX jquery eine Datei auf den Server hochladen können.
Zuerst erstellen wir eine HTML-Datei, um das folgende Formulardateielement wie unten gezeigt hinzuzufügen.
Erstellen Sie zweitens eine jquery.js-Datei und fügen Sie den folgenden Code hinzu, um die Übermittlung unserer Datei an den Server zu handhaben
Da bist du fertig. Mehr sehen
quelle
Die Verwendung von FormData ist der richtige Weg, wie aus vielen Antworten hervorgeht. Hier ist ein bisschen Code, der für diesen Zweck hervorragend funktioniert. Ich stimme auch dem Kommentar zu, Ajax-Blöcke zu verschachteln, um komplexe Umstände zu vervollständigen. Durch Einschließen von e.PreventDefault (); Nach meiner Erfahrung ist der Code browserübergreifender kompatibel.
quelle
Mit reinem js ist es einfacher
Hier ist ein weiter entwickeltes Snippet mit Fehlerbehandlung und zusätzlichem JSON-Senden
Code-Snippet anzeigen
quelle
Ja, Sie können einfach Javascript verwenden, um die Datei abzurufen, und sicherstellen, dass Sie die Datei als Daten-URL lesen. Analysieren Sie das Material vor base64, um die Base 64-codierten Daten zu erhalten. Wenn Sie dann PHP oder eine andere Back-End-Sprache verwenden, können Sie die Base 64-Daten dekodieren und in einer Datei wie unten gezeigt speichern
Natürlich möchten Sie wahrscheinlich eine Validierung durchführen, z. B. überprüfen, mit welchem Dateityp Sie es zu tun haben und ähnliches, aber das ist die Idee.
quelle
quelle
Sie können die Methode ajaxSubmit wie folgt verwenden :) Wenn Sie eine Datei auswählen, die auf den Server hochgeladen werden muss, müssen Sie das Formular an den Server senden :)
quelle
Um eine Datei hochzuladen, die der Benutzer als Teil des Formulars mit jquery eingereicht hat, folgen Sie bitte dem folgenden Code:
Senden Sie dann das Formulardatenobjekt an den Server.
Wir können eine Datei oder einen Blob auch direkt an das FormData-Objekt anhängen.
quelle
Wenn Sie Dateien mit AJAX hochladen möchten, finden Sie hier Code, den Sie zum Hochladen von Dateien verwenden können.
Hier ist der HTML-Code zum Hochladen der Datei
quelle
Um alle Formulareingaben einschließlich des Typs = "Datei" abzurufen, müssen Sie das FormData-Objekt verwenden . Sie können den formData-Inhalt im Debugger -> Netzwerk -> Header sehen, nachdem Sie das Formular gesendet haben .
quelle
quelle
Hier war eine Idee, an die ich dachte:
Haben Sie ein Formular, in das Sie das Element INPUT: File verschieben.
Das Ergebnis wird in den Frame gepostet, und dann können Sie die abgerufenen Daten einfach eine Ebene höher an das gewünschte Bild-Tag senden, mit folgenden Elementen:
und die Seite wird geladen.
Ich glaube, es funktioniert bei mir und je nachdem, ob Sie in der Lage sind, Folgendes zu tun:
quelle