JQuery, PHP

Upload multiple images menggunakan jQuery, Ajax dan PHP

Upload multiple images menggunakan jQuery, Ajax dan PHP

Hari ini saya akan mencoba untuk menyederhanakan upload multiple images tanpa refresh halaman. Dalam tutorial sederhana ini, kita akan membahas beberapa upload gambar menggunakan jQuery, Ajax dan PHP. Menggunakan script ini, Anda dapat meng-upload beberapa gambar sekaligus tanpa refresh halaman menggunakan jQuery, Ajax dan PHP.

Kami akan menunjukkan kepada Anda dua cara untuk menampilkan gambar setelah meng-upload. Setelah gambar di-upload ke server melalui jQuery, Anda dapat menampilkan gambar tanpa disimpan dalam folder atau disimpan dalam folder. Script ini sangat singkat, mudah dan berguna yang dapat dengan mudah diimplementasikan dalam proyek-proyek web Anda.

Baca panduan langkah  langkah berikut untuk memahami seluruh proses Upload beberapa gambar menggunakan jQuery, Ajax dan PHP. Juga, Anda dapat melihat live demo dari Demo link dan download kode sumber dari Download link pada akhir tutorial.

 

index.php File

index.php file berisi beberapa kode JavaScript dan HTML. Semua kode yang ada bisa di download di bawah akhir tutorial.

 

Kode JavaScript:

Pertama masukan dua file library JavaScript eksternal, jquery.min.js dan jquery.form.js. jQuery.min.js adalah library utama jQuery dan file jquery.form.js lain digunakan untuk submit form dengan file untuk meng-upload menggunakan jQuery Ajax.


 

Sekarang menulis beberapa kode JavaScript untuk pengiriman form dan menampilkan gambar yang diupload.

 

 

Kode HTML

Nama input file field didefinisikan sebagai array untuk menerima beberapa nama file dan juga digunakan beberapa atribut untuk beberapa dukungan upload.

 

Buat div dengan id target yang didefinisikan di atas untuk kode JavaScript. Upload gambar akan ditampilkan di div. ini Juga Anda dapat mengubah id div ini, tapi ingat bahwa JavaScript menargetkan nilai pilihan (target: '#images_preview') akan sama dengan id div ini.

 

 

process_uploading.php file:

process_uploading.php file berisi beberapa kode PHP untuk proses proses upload dan menghasilkan tampilan gambar. Ada dua cara untuk meng-upload gambar dan menampilkan gambar.

Salah satu cara adalah untuk menciptakan sebuah folder bernama upload /. Meng-upload gambar dan disimpan dalam folder tersebut.

$images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
    //upload and stored images
    $target_dir = "uploads/";
    $target_file = $target_dir.$_FILES['images']['name'][$key];
    if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
    $images_arr[] = $target_file;
    }
}

 

Anda dapat meng-upload foto dan gambar tanpa disimpan dalam folder.

$images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
    //menampilkan gambar tanpa disimpan
    $extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);
    $images_arr[] = "data:" . $extra_info["mime"] . ";base64," .  base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
}

 

Generate gambar

Setelah meng-upload gambar kita perlu untuk menghasilkan tampilan. Gambar ini akan ditampilkan di target div.


    

 

 

Demikian tutorial Upload multiple images menggunakan jQuery, Ajax dan PHP kali ini, mudah-mudahanan bisa bermanfaat.

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.