Upload file dengan pemisahan tampilan php dan javascript

Ini  hanya tulisan dokumentasi kerja agar nantinya di pekerjaan mendatang akan dapat memudahkan saya dalam menggunakan script ini. script yang dituliskan disini berfungsi dalam proses upload file. kesulitannya adalah ada banyak file yang harus diupload dan tiap file tersebut memiliki identitas yang berbeda-beda misalnya pencatatan identitas penduduk ada beberapa lampiran yang harus direkam di database yakni ktp_ayah, ktp_ibu, ktp_anak, kartu_keluarga dan lain sebagainya. sehingga akan ada tampilan yang banyak menggunakan file input upload.

Ini screenshot atau tampilan ilustrasi diatas :

Jadi setiap user mengklik kotak check box akan muncul tampilan  tombol pilihan browse file.

mudah sebenarnya kita tinggal copas aja coding HTML di tiap pilihan lampiran tersebut. berikut file HTML yang dimaksud.

dan kita akan mengatur reaksi tiap dom dengan menggunakan javascript (jquery). namun memang mudah diawal susah diakhir. bagaimana jika kita ingin melakukan perubahan pada DOM ?? tentunya kita akan mengedit banyak baris kode yang ada pada lampiran tersebut, terutama file reaksi user yang kita tuliskan dengan bantuan event di jquery.

agar mudah di pelihara / maintainable maka mestinya hanya ada satu struktur DOM. Satu struktur dom akan dapat diterapkan dengan menggunakan bantuan ajax yakni tiap ada user yang mengklik input checkbox akan mentrigger ajax meminta ke sisi server untuk meminta tampilan yang sama.

berikut scriptnya :

 

oh sebelumnya mestinya adalah script upload file dengan basis javascript object yang bersumber dari :

https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload

script diatas sudah saya modifikasi agar menampilkan nama file setiap proses upload berhasil dan menghilangkan status progress upload apabila selesai upload.

file css agar dapat menstyling :

 

di file html utama kita akan sangat mudah dalam memanggil tampilan tersebut cukup dengan coding berikut (yang bercetak tebal) :

 

file menerima file upload dari html form. file name : upload.php

 

tampilan screenshot waktu proses upload adalah sebagai berikut :

Our Score
1 Shares

Komentari bro