JQuery, PHP

Upload gambar tanpa page refresh dengan PHP dan jQuery

Upload gambar tanpa page refresh dengan PHP dan jQuery

Apakah Anda mencari script upload dan preview gambar tanpa refresh halaman menggunakan jQuery dan PHP? Anda berada di sini di tempat yang tepat. Berikut ini adalah script yang sangat sederhana yang digunakan untuk meng-upload file gambar tanpa refresh halaman menggunakan PHP dan jQuery.

index.php: ini adalah file utama yang berisi kode PHP sederhana untuk halaman upload, sesi menginisialisasi dan kode HTML dengan file upload form. File ini juga termasuk di dalamnya jQuery library, jQuery upload file gambar dan CSS file.

Di sini di index.php, saya juga memanggil uploads.php bentuk tindakan yang menangani fungsi upload gambar tanpa refresh halaman ketika melihat isi file gambar dengan bantuan dari jQuery upload.js.


Browse Image File:


 

Baca juga :

Upload multiple images menggunakan jQuery, Ajax dan PHP

Cara mencegah serangan Shell dalam Upload file gambar di PHP

 

Ini adalah suatu contoh desain database bagi pengguna. Tabel pengguna akan berisi rincian pengguna, seperti nama, username, password, email, dan profile_photo atau apapun yang Anda inginkan dalam table database Anda.

CREATE TABLE IF NOT EXISTS `users` (
`id_user` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`username` varchar(255) DEFAULT NULL,
`password` varchar(100) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`profile_photo` varchar(200) DEFAULT NULL,
PRIMARY KEY (`id_user`),
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 

File uploads.php adalah script PHP utama yang menangani fungsi upload gambar ke server dan juga tabel database update dengan rincian gambar upload.

";
}
else
echo "Image Upload failed";
}
else
echo "Image file size maximum 1 MB";
}
else
echo "Invalid file format";
}
else
echo "Please select your image";
exit;
}
?>

 

File upload.js ini berisi kode untuk mengirimkan form ketika upload file gambar untuk memberikan fungsi upload gambar dengan uploads.php. File ini juga menampilkan gambar upload loader.

$(document).ready(function() {
$('#photo').live('change', function() {
$("#preview").html('');
$("#preview").html('Please wait while Uploading....');
$("#image_upload_form").ajaxForm({
target: '#preview'
}).submit();
});
});

 

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.