Anregungen zum upload von Bildern mit jQuery-ajax
Ich habe ein Formular, das hat 3 Eingänge:
[1] text-input-Feld für status-Updates
[2] Datei-upload (für ein Bild)
[3] text-input-Feld für die Anbringung eines link
Der Benutzer schaltet zwischen den einzelnen ein-je nachdem, was Sie tun wollen. Zum Beispiel bei der Auswahl [2], Input [1] und [3] werden ausgeblendet.
Alle diese Eingaben, die in einem einzigen Formular mit der id posts_form
. Optionen [1] und [3] post per Ajax an verschiedenen Controllern.
Mein problem ist jetzt mit der option [2], weil es nicht möglich ist das hochladen von Bildern mit jQuery-ajax.
Einige Lösungen, die ich gesehen habe, bedeuten, mit der jQuery-Form-plugin, aber ich Frage mich, ob es möglich wäre, zu tun, Bild hochladen, ohne die Nutzung eines plugins.
Beispielsweise wäre dies die code-Basis für das hochladen, was natürlich nicht funktioniert.
$.ajax({
url: 'chat/upload/' + <?php echo $page_id; ?>,
type: 'POST',
data: $('#posts_form').serialize(),
dataType: 'html',
beforeSend: function(){
$('#loading').show();
},
success: function(html) {
$('#attach').replaceWith(html);
$('#loading').hide();
$('#posts_form input').val('');
$('.posts_link').val('');
$('#chat_input').hide();
}
});
Irgendwelche Vorschläge, was könnte Hinzugefügt /geändert zu gestatten, Bild-upload mit jQuery-nur ohne plugins?
Dank.
InformationsquelleAutor pepe | 2011-06-24
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihre beste Wahl, ist dieses plugin. Sie verschwenden Ihre Zeit versuchen, es zu tun, ohne dass dies.
http://jquery.malsup.com/form/
InformationsquelleAutor jchavannes
Es gibt keine einfache Methode zum hochladen einer Datei über AJAX. Das ist eine Einschränkung, die in HTML4. Problemumgehungen sind mit einem iframe oder Flash.
In HTML5, eine Datei-API eingeführt, um dieses problem zu lösen. Hier ist eine demo dafür, dass die API (über einen Firefox 3.6+), das Ihnen ermöglicht, per drag-and-drop ein Bild und laden Sie es ohne senden es zurück an den server: http://html5demos.com/file-api. Es unterstützt auch mehrere Dateien: http://demos.hacks.mozilla.org/openweb/DnD/.
Lesen Sie über diese Spezifikation auf W3.org, wenn Sie daran interessiert sind.
Wenn Sie nicht davon abhängen, Kunden zu haben, der Browser unterstützt HTML5-Datei-API können Sie entweder Rollen, die Sie besitzen oder verwenden, wählen Sie eine Bibliothek, die das iframe-workaround:
input type=submit
-- sehen Sie sich hier die neue Frage, die ich gepostet -- ich werde überprüfen Sie auch die anderen LösungenInformationsquelleAutor William Niu