PHP jQuery Ajax melaksanakan berbilang muat naik imej effects_jquery

Apa yang saya akan kongsikan dengan anda hari ini ialah menggunakan PHP jQuery Ajax untuk mencapai kesan memuat naik berbilang imej tanpa menyegarkan halaman. Pengguna hanya perlu mengklik untuk memilih imej untuk dimuat naik, dan kemudian imej itu dimuat naik secara automatik ke pelayan dan dipaparkan pada halaman.

HTML

Kami meletakkan borang pada halaman dan menggunakan siaran untuk menyerahkannya kepada pengendali php latar belakang upload.php Ambil perhatian bahawa tetapan atribut enctype mesti menyokong muat naik fail. #preview digunakan untuk memaparkan imej selepas dimuat naik. Tiada penjelasan dalam artikel ini tentang tetapan gaya css Sila rujuk kod sumber pakej muat turun.

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 Tambah Imej           

Maksimum 100KB, menyokong format jpg, gif dan png.

jQuery
Contoh ini adalah berdasarkan jQuery, jadi perpustakaan jquery dan jquery.wallform.js mesti dimuatkan ke dalam halaman.

Salin kod

Kod adalah seperti berikut:

Apabila butang "Tambah Imej" diklik, kotak dialog pemilihan fail muncul Selepas memilih imej untuk dimuat naik, peristiwa perubahan dicetuskan. Kemudian borang #imageform memanggil kaedah ajaxForm() jquery.wallform.js, menyerahkan data borang ke PHP latar belakang untuk diproses dan memproses paparan elemen halaman berdasarkan hasil yang dikembalikan. Jika muat naik berjaya, imej akan dipaparkan pada halaman satu persatu. Mengenai penggunaan ajaxForm(), anda boleh merujuk artikel di laman web ini: Borang jqery pemalam penyerahan borang Ajax.

Salin kod

Kod adalah seperti berikut:

$(function(){

$('#photoimg').die('klik').live('change', function(){

        var status = $("#up_status");       var btn = $("#up_btn");           $("#imageform").ajaxForm({ Sasaran: '#preview',               sebelumSerah:function(){ status.show();                     btn.hide();              },                 kejayaan:function(){ status.hide();

                     btn.show();              },

            ralat:function(){
status.hide();
                     btn.show();            } }).serahkan();
});
});

PHP

upload.php memproses muat naik imej dan menyimpan imej yang dimuat naik dalam direktori muat naik/ Ambil perhatian bahawa direktori mesti mempunyai kebenaran menulis. Mula-mula, anda perlu menyemak sama ada ia diserahkan dalam mod POST, kemudian tentukan sama ada format imej dan saiz imej memenuhi keperluan, kemudian gunakan move_uploaded_file() untuk memuat naik imej dan menamakan semula imej dalam format: time().rand (100,999).

Salin kod Kod adalah seperti berikut:

$path = "muat naik/"; $extArr = array("jpg", "png", "gif");
if(isset($_POST) dan $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name']; $size = $_FILES['photoimg']['size']; Jika(kosong($nama)){
echo 'Sila pilih imej untuk dimuat naik'; keluar;
}
$ext = extend($name);
Jika(!in_array($ext,$extArr)){
echo 'Format gambar salah! ';
keluar;
}
Jika($saiz>(100*1024)){
echo 'Saiz imej tidak boleh melebihi 100KB'; keluar;
}
$nama_gambar = masa().rand(100,999).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name']; If(move_uploaded_file($tmp, $path.$image_name)){
echo '';
}lain{
echo 'Ralat muat naik! ';
}
keluar;
}
//Dapatkan akhiran jenis fail
fungsi extend($file_name){
$extend = pathinfo($file_name); $extend = strtolower($extend["extension"]); Kembalikan $extend; }



Sudah tentu, dalam aplikasi sebenar, ia boleh digabungkan dengan pangkalan data dan pusat pengguna untuk menyimpan imej yang dimuat naik oleh pengguna dalam jadual data Anda boleh mengkaji aplikasi tertentu sendiri.

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini, saya harap anda akan menyukainya.