Zwar gibt es ähnliche Fragen zu Stack Overflow, aber es scheint, dass keine meinen Anforderungen entspricht.
Folgendes möchte ich tun:
- Laden Sie eine ganze Form von Daten hoch, von denen ein Teil eine einzelne Datei ist
- Arbeiten Sie mit der Datei-Upload-Bibliothek von Codeigniter
Bis hierher ist alles in Ordnung. Die Daten werden nach Bedarf in meine Datenbank aufgenommen. Ich möchte mein Formular aber auch über einen AJAX-Beitrag einreichen:
- Verwenden Sie die native HTML5-Datei-API, kein Flash oder eine Iframe-Lösung
- Vorzugsweise Schnittstelle mit der Low-Level-
.ajax()
jQuery-Methode
Ich denke, ich könnte mir vorstellen, wie das geht, indem ich die Datei automatisch hochlade, wenn sich der Wert des Feldes mit reinem Javascript ändert, aber ich würde es lieber auf einen Schlag erledigen, um es in jQuery einzureichen. Ich denke, es ist nicht möglich, über Abfragezeichenfolgen zu arbeiten, da ich das gesamte Dateiobjekt übergeben muss, aber ich bin ein wenig verloren, was zu diesem Zeitpunkt zu tun ist.
Kann das erreicht werden?
javascript
jquery
ajax
html
file-upload
Joshua Cody
quelle
quelle
Antworten:
Es ist nicht zu schwer. Schauen Sie sich zunächst die FileReader-Schnittstelle an .
Wenn das Formular gesendet wird, fangen Sie den Übermittlungsprozess ab und
Dann auf der Serverseite (dh myscript.php):
Oder so ähnlich. Ich kann falsch sein (und wenn ich bin, bitte korrigieren Sie mich), aber dies sollte die Datei als etwas speichern , wie
1287916771myPicture.jpg
in/uploads/
auf dem Server, und reagiere mit einer JSON Variable (incontinueSubmission()
Funktion) den Dateinamen auf dem Server enthält.Check out
fwrite()
undjQuery.post()
.Auf der oben genannten Seite Details es , wie zu bedienen
readAsBinaryString()
,readAsDataUrl()
undreadAsArrayBuffer()
für andere Bedürfnisse (zB Bilder, Videos, etc.).quelle
Mit jQuery (und ohne FormData-API) können Sie Folgendes verwenden:
Mit der FormData-API müssen Sie nur alle Felder Ihres Formulars zum FormData-Objekt hinzufügen und über $ .ajax senden ({url: url, data: formData, processData: false, contentType: false, type: "POST"}).
quelle