Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Meng-upload file dengan AJAX

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Saya tidak bisa mencapai akhir hal menyenangkan yang dapat Anda lakukan dengan teknologi web yang muncul. Hari ini, saya akan menunjukkan kepada Anda bagaimana melakukan sesuatu itu—sampai saat terakhir—hampir tidak pernah terjadi sebelumnya: mengunggah file melalui AJAX.

Oh, tentu, ada hack; tapi jika Anda seperti saya, dan merasa kotor setiap kali Anda mengetik iframe, Anda akan sangat menyukai ini. Bergabunglah dengan saya setelah lompatan ini!

Mencari Solusi Cepat?

Jika Anda mencari solusi cepat, ada banyak kumpulan skrip dan aplikasi unggahan file di Envato Market.

HTML5 file uploader ini sangat bagus — Anda dapat menambahkan file dengan mudah dengan menyeret dan menjatuhkannya atau mengkliknya. Semua file akan diupload melalui AJAX atau dapat ditambahkan dalam form, dan file dapat diganti namanya sebelum diunggah. Solusi hebat dan cepat jika itu yang Anda cari!


Kenapa kita tidak mendapat kabar buruknya?

Ini tidak bekerja di setiap browser. Namun, dengan beberapa peningkatan progresif (atau apa pun kata kunci saat ini), kita akan memiliki halaman unggahan yang akan berfungsi kembali ke IE6 (walaupun tanpa potongan AJAX).

Unggahan AJAX kita akan bekerja selama FormData tersedia; jika tidak, pengguna akan mendapatkan unggahan normal.

Ada tiga komponen utama untuk proyek kita.

  • Atribut multiple pada elemen input file.
  • Objek FileReader dari File API yang baru.
  • Objek FormData dari XMLHttpRequest2.

Kita menggunakan atribut multiple untuk memungkinkan pengguna memilih beberapa file untuk diunggah (beberapa upload file akan bekerja normal meski FormData tidak tersedia). Seperti yang akan Anda lihat, FileReader memungkinkan kita menampilkan thumbnail pengguna dari file yang mereka unggah (kita akan mengharapkan gambar).

Tak satu pun dari tiga fitur kita bekerja di IE9, jadi semua pengguna IE akan mendapatkan pengalaman mengunggah yang normal (walaupun saya mengerti dukungan untuk `FileReader` tersedia di IE10 Dev Preview 2). FileReader tidak bekerja di Safari versi terbaru (5.1), jadi mereka tidak akan mendapatkan thumbnail, tapi mereka akan mendapatkan unggahan AJAX dan pesan konfirmasi. Akhirnya, Opera 10.50 memiliki dukungan FileReader namun tidak mendukung FormData, jadi mereka akan mendapatkan thumbnail, tapi unggahan normal.

Dengan itu semua, mari kita mengkode!


Langkah 1: Markup dan Gaya

Mari kita mulai dengan beberapa markup dan gaya dasar. Tentu saja, ini bukan bagian utama dari tutorial ini, saya tidak akan memperlakukan Anda seperti newbie.

HTML

Cukup mendasar, ya? Kitai punya form yang mengirim ke upload.php, yang akan kita lihat sebentar lagi, dan satu elemen input tunggal, dari type file. Perhatikan bahwa ada beberapa atribut boolean multiple, yang memungkinkan pengguna untuk memilih beberapa file sekaligus.

Itu benar-benar semua ada untuk dilihat di sini. Mari kita lanjutkan.

CSS

Sama sekali tidak ada kejutan di sini.


Langkah 2: PHP

Kita juga harus bisa menangani unggahan file di back end juga, jadi mari kita bahas selanjutnya.

upload.php

Ingatlah bahwa ini adalah baris pertama PHP yang telah saya tulis dengan mudah dalam setahun (saya orang pengguna Ruby). Anda mungkin harus melakukan sedikit lebih untuk keamanan; namun, kita hanya memastikan bahwa tidak ada kesalahan pengunggahan. Jika demikian, kita menggunakan move_uploaded_file bawaan untuk memindahkannya ke folder uploads. Jangan lupa untuk memastikan bahwa folder itu writeable.

Jadi, sekarang, kita akan memiliki form unggahan yang berfungsi. Anda memilih gambar (beberapa, jika Anda mau dan browser Anda mengizinkan Anda), klik tombol "Upload Files!", dan Anda mendapat pesan "Successfully Uploaded Images."

Inilah proyek mini kita sejauh ini:

The styled form

Tapi, ayolah, ini tahun 2011: kita ingin lebih dari itu. Anda akan melihat bahwa kita telah menghubungkan jQuery dan file upload.js. Mari kita bedah sekarang.


Langkah 3: JavaScript

Jangan buang waktu: ini dia!

Inilah yang kita mulai. Kita membuat dua variabel: input adalah elemen masukan file kita; formdata akan digunakan untuk mengirim gambar ke server jika browser mendukungnya. Kita menginisialisasinya ke false dan kemudian memeriksa untuk melihat apakah browser mendukung FormData; jika ya, kita membuat objek FormData baru. Juga, jika kita bisa mengirimkan gambar dengan AJAX, kita tidak memerlukan tombol "Upload Images!", jadi kita bisa menyembunyikannya. Kenapa kita tidak membutuhkannya? Nah, kita akan secara otomatis mengunggah gambar segera setelah pengguna memilihnya.

Sisa dari JavaScript akan masuk ke dalam fungsi anonim yang berjalan sendiri milik Anda. Kita selanjutnya membuat fungsi pembantu kecil yang akan menampilkan gambar setelah browser memilikinya:

Fungsi mengambil satu parameter: sumber gambar (kita akan melihat bagaimana kita mendapatkannya segera). Kemudian, kita hanya menemukan daftar di markup kita dan membuat daftar item dan gambar. Kita atur sumber gambar ke sumber yang kita terima, letakkan gambar di daftar item, dan letakkan item daftar dalam daftarnya. Voila!

Selanjutnya, kita harus benar-benar mengambil gambar, menampilkannya, dan mengunggahnya. Seperti yang telah kami katakan, kita akan melakukan ini saat kejadian onchange dijalankan pada elemen input.

Kita tidak perlu khawatir tentang model event milik IE, karena IE9+ mendukung fungsi addEventListener standar.

Masih ada lagi, tapi mari kita mulai dengan ini. Pertama, kita tidak perlu khawatir tentang model event milik IE, karena IE9+ mendukung fungsi addEventListener standar (dan IE9 dan ke bawah tidak mendukung fitur baru kita).

Jadi, apa yang ingin kita lakukan bila pengguna telah memilih file? Pertama, kita membuat beberapa variabel. Satu-satunya yang penting saat ini adalah len = this.files.length. File yang telah dipilih pengguna akan dapat diakses dari objek this.files. Saat ini, kita hanya peduli dengan properti length, jadi kita bisa mengulang file-file …

… itulah yang akan kita lakukan selanjutnya. Di dalam perulangan, kita mengatur file saat ini untuk mengajukan kemudahan akses. Hal selanjutnya yang kita lakukan adalah mengonfirmasi bahwa file itu adalah gambar. Kita bisa melakukan ini dengan membandingkan properti type dengan sebuah regular expression. Kita mencari type yang dimulai dengan "image" dan diikuti oleh apapun. (Double-bang di depan hanya mengubah hasilnya ke boolean.)

Jadi, apa yang kita lakukan jika kita memiliki gambar di tangan kita?

Kita memeriksa untuk melihat apakah browser mendukung pembuatan objek FileReader. Jika ya, kita akan membuatnya.

Begini cara kita menggunakan objek FileReader: Kita akan mengirimkan file kita ke metode reader.readAsDataURL. Ini membuat url data untuk gambar yang diunggah. Itu tidak sesuai dengan harapan Anda. Url data tidak dikirimkan kembali dari fungsinya. Sebagai gantinya, url data akan menjadi bagian dari objek event.

Dengan pemikiran itu, kita perlu mendaftarkan sebuah fungsi pada event reader.onloadend. Fungsi ini mengambil objek event, dengan dimana kita mendapatkan url data: itu ada di e.target.result (ya, e.target adalah objek reader, tapi saya punya masalah saat menggunakan reader menggantikan e.target di dalam fungsi ini). Kita hanya akan mengirimkan url data ini ke fungsi showUploadedItem kita (yang kita tulis di atas).

Selanjutnya, kita periksa untuk objek formdata. Ingat, jika browser mendukung FormData, formdata akan menjadi objek FormData; jika tidak, itu akan false. Jadi, jika kita memiliki objek FormData, kita akan memanggil metode append. Tujuan dari objek FormData adalah untuk menampung nilai yang Anda kirimkan melalui form; jadi, metode append hanya mengambil kunci dan nilai. Dalam kasus kita, kunci kita adalah images[]; dengan menambahkan tanda kurung siku di akhir, kita memastikan setiap kali kita append nilai lain, kita sebenarnya menambahkannya ke array itu, alih-alih menimpa properti image.

Kita hampir selesai. Di dalam loop kita, kita telah menampilkan setiap gambar untuk pengguna dan menambahkannya ke objek formdata. Sekarang, kita hanya perlu mengunggah gambarnya. Di luar loop for, inilah bagian terakhir dari teka-teki kita:

Sekali lagi, kita harus memastikan bahwa kita memiliki dukungan FormData; jika tidak, tombol "Upload Files!" akan terlihat, dan begitulah cara pengguna mengunggah foto. Namun, jika kita memiliki dukungan FormData, kita akan menangani pengunggahan melalui AJAX. Kita menggunakan jQuery untuk menangani semua keanehan AJAX di seluruh browser.

Anda mungkin sudah familiar dengan metode $.ajax jQuery: Anda memberinya pilihan objek. Properti url, type, dan success sudah jelas. Properti data adalah objek formdata kita. Perhatikan properti processData dan contentType tersebut. Menurut dokumentasi jQuery, processData adalah true secara default, dan akan memproses dan mengubah data menjadi query string. Kita tidak ingin melakukan itu, jadi kita menetapkan ke false. Kita juga menyetel contentType ke false untuk memastikan data tersebut masuk ke server sesuai harapan.

Dan hanya itu. Sekarang, ketika pengguna memuat halaman, mereka melihat ini:

Tutorial Image

Dan setelah mereka memilih gambar, mereka akan melihat ini:

Tutorial Image

Dan gambarnya telah diunggah:

Tutorial Image

Merangkum!

Mengunggah file melalui AJAX cukup keren, dan bagus sekali bahwa teknologi baru ini mendukungnya tanpa memerlukan hack yang panjang. Jika Anda memiliki pertanyaan tentang apa yang telah kita lakukan di sini, tekan komentar tersebut! Terima kasih banyak telah membaca!

Dan jika Anda masih memerlukan bantuan untuk masalah ini atau masalah pengkodean lainnya, temukan dukungan di Envato Studio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.