cara upload file dengan coding ajax sederhana

Hei.. sekarang sudah tahun 2017, dimana teknologi bukan hanya terpusat pada teknologi desktop. Sekarang aplikasi mengarah ke penggunaan Software As a Service yakni aplikasi yang bersifat mobile, multiuser dan flexible. Membangun aplikasi dengan beberapa kriteria diatas tidak semudah ndas mu…  😀 . Misalnya saja dibangun di PHP ada banyak tutorial, script contoh, framework serta coding standard yang berbeda-beda dalam menerapkan suatu pembangunan aplikasi.

PHP merupakan bahasa berbasis komunitas sehingga untuk aturan coding dan beberapa hal terkati penggunaannya diserahkan sepenuhnya ke komunitas. sehingga sangat berbeda dengan coding berbasis proprietary based dimana coding sudah standar.

Sebenarnya paragraf diatas cuman kalimat pembuka aja, daripada cuman langsung to the point kan ga mesra hehe… Cukup deh kalimat pembukanya. sekarang kita to the point aja deh…

saya akan membagikan cara sederhana untuk mengupload file dengan menggunakan ajax.

berikut script yang harus kalian siapkan.

  1. Script utama uploader berbasis javascript
  2. script ajax sebagai eksekutor uploader
  3. script HTML sebagai user interface atau tampilan dasar aplikasi
  4. script server based uploader dengan PHP.

Script Utama uploader berbasis javascript :

insert file diatas dihalaman HTML nantinya dalam block <script> </script>

 

script ajax sebagai eksekutor uploader

script tampilan HTML

 

PHP uploader

Selesai ?

Tentu saja belum mang enak aja… hehe  😛 , yang diatas tersebut cuman script sederhana doang, ga ada pemeriksaan ukuran file yang diupload, pemeriksaan jenis file atau mime, pengamanan terhadap isi file, upload dengan banyak file / multiple file upload, upload berbasis chunk. but…. dengan script sederhana diatas tinggal dikembangin aja bagaimana cara agar bisa mencapai beberapa prinsip keamanan dalam upload file.

sebagai bonus berikut akan dituliskan agar tampilan browse (pada tombol input pemilihan file di tampilan HTML) menjadi tidak boring, maka kita akan menambahkan trigger dengan menggunakan jquery sehingga tampilan pemilihan file akan bebas kita styling sesuai dengan kesukaan ndas mu.

 

Yang kita perlukan adalah.
1. File HTML .

2. Script javascript mentrigger class uploadbutton untuk membuka browser file
ini ndas. ..  😛

akhirnya selesai ?

nda sekarang aku akan menyelesaikan pekerjaan coding ini… ga akan selesai sampai kiamat hahaha

 

Our Score
2 Shares

Komentari bro