Kami telah membahas beberapa metode dasar untuk mengambil data dan meneruskannya dengan permintaan AJAX. Sekarang saatnya berbicara tentang bagaimana Anda bisa mengupload file menggunakan AJAX. Sampai saat ini, tidak banyak cara untuk mendownload file tanpa memuat ulang halaman itu sendiri (iframe tersembunyi, Flash). Mereka masih digunakan sampai sekarang karena masih ada pengguna dengan browser versi lama yang belum terpengaruh oleh kemajuan. Namun kami tidak akan melihat ke belakang, jadi kami mengikuti perkembangan zaman.

Mari kita pertimbangkan, menurut pendapat saya, salah satu yang paling banyak cara yang nyaman untuk bekerja dengan file (dan tidak hanya) - objek FormData. Biarkan ada formulir sederhana untuk memuat avatar pengguna:

HTML ( file indeks.html)

Nama lengkap:
Avatar:

Mari beralih ke bagian JS. Tidak akan ada kesulitan dengan bidang "Nama Lengkap" dan kami menggunakannya hanya untuk menggambarkan bahwa bersama dengan file tersebut, kami dapat mengirimkan data lainnya.

jQuery ( file skrip.js)

$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), formData = new FormData($that.get ( 0)); // membuat instance objek baru dan meneruskan formulir kita ke sana (*) $.ajax(( url: $that.attr("action"), ketik: $that.attr("method"), contentType: false , // important - kami menghapus pemformatan data default processData: false, // important - kami menghapus data konversi string default: formData, dataType: "json", sukses: function(json)( if(json)( $itu.replaceWith( json);

(*)Harap dicatat bahwa kami meneruskan formulir bukan sebagai objek jQuery, tetapi sebagai elemen DOM

Penangan PHP ( file handler.php)