jQuery Ajax File Upload
Kann ich mit den folgenden jQuery-code, um eine Datei-upload mit der post-Methode ein Ajax-request ?
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
Wenn es möglich ist, benötige ich zum füllen der "Daten" - Teil? Ist es der richtige Weg? Ich habe nur erlaubt, die Datei auf der server-Seite.
Habe ich schon Googeln um, aber was ich gefunden habe, war ein plugin, während in meinem plan, den ich nicht wollen, es zu benutzen. Zumindest für den moment.
Ajax unterstützt keine Datei-uploads, die Sie verwenden sollten, anstatt iframe
Verwandte Frage: stackoverflow.com/questions/6974684/...
Verwandte: stackoverflow.com/questions/166221/...
Verwandte: aufzugeben.ie/notebook/einfache Datei-uploads-using-jquery-ajax
Verwandte Frage: stackoverflow.com/questions/6974684/...
Verwandte: stackoverflow.com/questions/166221/...
Verwandte: aufzugeben.ie/notebook/einfache Datei-uploads-using-jquery-ajax
InformationsquelleAutor Willy | 2010-02-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
Datei-upload ist
nichtmöglich durch ajax.Sie können die Datei hochladen, ohne erfrischende Seite mit IFrame.
Sie können überprüfen, weitere Details hier
UPDATE:
Mit XHR2, Datei-upload per AJAX unterstützt wird. E. g. durch FormData Objekt, aber leider ist es nicht von allen unterstützt/alte Browser.
FormData-support beginnt ab der folgenden desktop-Browser-Versionen.
IE 10+,
Firefox 4.0+,
Chrome 7+,
Safari 5+,
Opera 12+
Für mehr Details, siehe MDN link
Speziell, IE < 10 nicht, für diejenigen, die zu faul zum Lesen den link.
Nein, wir müssen nicht warten, dass lange nicht mehr, weil alle nur IE hat ein 22% weltweiten Marktanteilen und 27% in den USA und schnell fallen. Die Chancen sind es ist, die Menschen über 70 Jahre alt. Also lieber als der IE diktieren, was die Entwickler zu tun haben, DH entweder auf Vordermann bringen oder sich aus dem Rennen.
Die meisten IE Nutzer sind office Mitarbeiter, die nicht die Wahl haben auf welchen browser zu verwenden, da der unternehmensinternen Richtlinien. Ich glaube nicht, dass Alter hat viel zu tun mit es. Ich vermute, die meisten Leute > 70 bekommen Ihre Nachkommen installieren Sie Chrome oder FF, stattdessen 🙂
Diesen link hat mir wirklich geholfen in das Verständnis das absolute minimum. Ich habe nicht verwenden ein xhr-Anfrage. Wenn Sie ajax verwenden, stellen Sie sicher, dass die
enctype
zu"form/multipart"
!InformationsquelleAutor Adeel
Iframes ist nicht mehr erforderlich, für das hochladen von Dateien durch ajax. Ich habe vor kurzem es getan habe. Schauen Sie sich diese Seiten:
Mit HTML5 Datei-Upload mit AJAX und jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Aktualisiert die Antwort und gereinigt. Verwenden Sie die getSize-Funktion zu überprüfen, der Größe und der Nutzung der getType-Funktion zum überprüfen von Typen.
Hinzugefügt progressbar-html-und css-code.
Wie zu verwenden der Upload-Klasse
Progressbar html-code
Progressbar css-code
Beachten Sie, dass myXhr scheint zu sein, Globale wie name, Größe und Typ. Auch ist es besser zu nutzen "beforeSend" als Ergänzung zu den bereits erstellten XMLHttpRequest-Objekt, anstatt mit "xhr" zu erstellen, dann ändern Sie es.
Nicht von IE9 unterstützt: caniuse.com/#search=xhr
Ich glaube nicht, dass wir verwenden können, wie @Ziinloader. Sie verwenden einige lokale Methode, die nicht im Lieferumfang enthalten:
writer(catchFile)
. Was istwriter()
?Was ist, wenn die Daten auch enthält paar Felder zusammen mit Datei hochladen?
InformationsquelleAutor Ziinloader
Ajax post-und upload-Datei ist möglich. Ich bin mit
jQuery $.ajax
- Funktion zum laden meiner Dateien. Ich habe versucht, die Verwendung der XHR-Objekt, konnte aber keine Ergebnisse auf der server-Seite mit PHP.Wie Sie sehen können, müssen Sie ein FormData-Objekt leer ist oder aus (serialisiert? -
$('#yourForm').serialize())
bestehenden form, und befestigen Sie dann die input-Datei.Hier gibt es mehr Informationen:
- Wie zum hochladen einer Datei mithilfe von jQuery.ajax und FormData
- Hochladen von Dateien über das jQuery-Objekt FormData ist vorhanden, und keine Datei mit dem Namen, GET-Anforderung
Für den PHP-Prozess, den Sie verwenden können, so etwas wie dieses:
Die Antwort war geschrieben in 2014. Die version von JQuery war 1.10. Ich habe nicht versucht, mit den neueren Versionen.
formData.append('file', $('#file')[0].files[0]);
zurückundefined
undconsole.log(formData)
hat nichts außer_proto_
Nicht unterstützt von IE 9, falls geklebt wird, in die gleiche Hölle wie ich
Ich habe diese arbeiten...kneif mich, ich bin auf jQuery Ajax file upload-Himmel!
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); } });
InformationsquelleAutor pedrozopayares
Ich bin ziemlich spät dafür, aber ich war auf der Suche für eine ajax-basierte Bild-Upload-Lösung und die Antwort, die ich suchte war ein bisschen verstreut in diesem Beitrag. Die Lösung ließ ich mich auf beteiligt das FormData-Objekt. Ich stellte eine einfache form der code den ich zusammen gestellt habe. Sie können sehen, es veranschaulicht, wie hinzufügen eines benutzerdefinierten Felds auf dem Formular mit fd.append() als auch wie zu handle-response-Daten, wenn der ajax request fertig ist.
Upload html:
Den Fall, Sie sind mit php zu arbeiten, hier ist eine Möglichkeit zum verarbeiten der upload beinhaltet die Nutzung der beiden benutzerdefinierten Felder gezeigt, in der oben genannten html.
Upload.php
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
warum ist das so sir ich kopieren fügen Sie den code ein, als es istwenn du Google deine Fehlermeldung, dies ist das erste Ergebnis: stackoverflow.com/questions/10752055/... Werden Sie den Zugriff auf Ihre web-Seiten lokal durch
file://
werden, anstatt ein web-server? Nebenbei, es ist nicht best practice, einfach kopieren-und-einfügen von code-blind, ohne zuerst zu verstehen. Ich würde Ihnen empfehlen, gehen Sie durch den code Zeile für Zeile zu verstehen, was passiert ist, bevor Sie den code verwenden.danke für die Klärung ein paar Dinge, die ich habe gehen durch, die es Zeile für Zeile und ich nicht wirklich verstehe, so viel ist mir die Frage so, dass jemand vielleicht klären sich meine Zweifel. Ich bin mit lokalen durch xampp um genau zu sein. Kann ich eine Frage stellen, die Sie vielleicht klären können?
Wiederbelebung : ich weiß, dass es zu spät für die Antwort.. Du hast ein cross-origin-Fehler, da öffneten Sie die html-Datei als Datei, als läuft es aus dem server.
ich appreaciate die Antwort wie schlagen Sie vor, ich Mach es, es richtig zu machen?
InformationsquelleAutor lee8oi
Einem AJAX-upload ist in der Tat möglich mit XMLHttpRequest(). Keine iframes erforderlich. Upload-Fortschritt angezeigt werden können.
Für details siehe: Antwort https://stackoverflow.com/a/4943774/873282 zu Frage jQuery Upload Progress und AJAX Datei upload.
InformationsquelleAutor koppor
In Fall, dass Sie wollen, tun Sie es so:
als
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
könnte Ihre Lösung.
github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/...
Vielen Dank für den Beitrag Ihre Antwort! Bitte Lesen Sie die FAQ on Self-Promotion vorsichtig. Beachten Sie auch, dass es erforderlich, die Sie der post einen disclaimer jedes mal, wenn Sie einen link zu Ihrer eigenen Website/Produkt.
InformationsquelleAutor lgersman
Mehr details auf meinem blog-post: http://blog.manki.in/2011/08/ajax-fie-upload.html.
was ist Ihr Anliegen?
InformationsquelleAutor Manki
edit: Hinweis contentype-und Prozessdaten
Sie können einfach verwenden Sie diese, um Dateien hochladen per Ajax...... submit input nicht äußere form element 🙂
InformationsquelleAutor Gvice
Hier ist, wie ich diese Arbeit:
HTML
JS
PHP
$('#file')[0].files[0]
ist eine Art von seltsam JS-workaround, ohne dass eine ordnungsgemäße<form>
InformationsquelleAutor М.Б.
Implementierte ich ein multiple-Datei wählen Sie mit instant preview und upload nach dem entfernen unerwünschter Dateien aus dem Vorschau per ajax.
Ausführliche Dokumentation kann hier gefunden werden: 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:
InformationsquelleAutor Ima
Habe ich bearbeitet diese in einem einfachen code. Sie können herunterladen eine funktionierende demo von hier
Für Ihren Fall, diese sehr gut möglich. Ich werde Ihnen Schritt für Schritt, wie Sie können eine Datei hochladen, um den server mit AJAX jquery.
Zuerst wollen wir uns eine HTML-Datei erstellen, fügen Sie die folgende Datei Formular-element wie unten dargestellt.
Zweitens erstellen Sie eine jquery.js Datei und fügen Sie folgenden code zum behandeln von unserem Datei-übermittlung an den server
Da Sie fertig sind . mehr Anzeigen
InformationsquelleAutor Daniel Nyamasyo
Mit FormData ist der Weg zu gehen, wie durch viele Antworten. hier ist ein Stück code, das funktioniert Super für diesen Zweck. Ich Stimme auch mit der Kommentar-Verschachtelung ajax-Blöcken zum ausführen komplexer Umstände. Indem e.PreventDefault(); in meiner Erfahrung ist der code mehr cross-browser-kompatibel.
InformationsquelleAutor Mike Volmar
Ja, Sie können, verwenden Sie einfach die javascript-Datei zu erhalten, machen Sie sicher, Lesen Sie die Datei als data-URL. Analysiert wird das Zeug vor der base64, um tatsächlich Holen Sie sich die base-64-codierte Daten und dann, wenn Sie mit php oder wirklich alle back-end-Sprache Dekodieren der base-64 Daten und speichern Sie in eine Datei wie unten gezeigt
Natürlich werden Sie wahrscheinlich wollen, zu tun, einige Validierung zu prüfen, welche Datei-Typ Sie sind den Umgang mit und sowas, aber das ist die Idee.
InformationsquelleAutor Piacenti
InformationsquelleAutor Nikit Barochiya
Können Sie Methode ajaxSubmit wie Folgen 🙂
wenn Sie eine Datei auswählen, müssen auf server hochladen, Formular senden an server 🙂
du hast Recht! das Skript muss unter Verwendung der jquery-form-plugin zu senden, verwenden Sie die Methode ajaxSubmit, die definieren, in jquery form plugin
InformationsquelleAutor Quy Le
hochladen einer Datei, die übermittelt wird, durch den Benutzer als Teil der form unter Verwendung von jquery, Folgen Sie bitte den folgenden code :
Dann senden Sie das Formular-Daten-Objekt zum server.
Wir können auch hinzufügen einer Datei oder Blob-direkt an das FormData-Objekt.
InformationsquelleAutor VISHNU Radhakrishnan
Wenn Sie möchten, um die upload-Datei per AJAX hier ist der code, die Sie verwenden können für den Datei-Upload.
Hier ist der HTML-Code für die Datei Hochladen
InformationsquelleAutor Nikunj K.
Bekommen alle Ihre Formular-Eingaben, einschließlich der type="file", die Sie verwenden müssen FormData-Objekt.
Sie werden in der Lage, um zu sehen, das formData-Inhalte in der debugger -> Netzwerk ->Kopf - nachdem Sie das Formular abschicken.
InformationsquelleAutor David
InformationsquelleAutor Jayesh Paunikar
2019 update:
html
js
views.py
Weil das Problem manifestiert sich vergleichsweise zwar mit Django, und wenn Sie mit Django, gibt es nicht viel Richtung in Bezug auf die Lösung. Ich dachte, ich würde bieten pro-aktive Hilfe nur falls jemand hier ankommt, wie ich es Tat in die Zukunft. Nachdem ein harter Tag?
InformationsquelleAutor Jay
Hier war eine Idee, die ich dachte, war:
Habe ein Formular, in dem Sie bewegen Sie den EINGANG:Datei-element zu.
Das Ergebnis veröffentlichen wird, um den Rahmen, und dann können Sie nur senden Sie die abgerufenen Daten auf ein Niveau der Bild-tag, Sie wollen mit so etwas wie:
und die Seite geladen.
Ich glaube, es funktioniert für mich, und je nachdem, wo Sie in der Lage sein könnte, etwas zu tun:
InformationsquelleAutor Fallenreaper