Membuat PHP Ajax Image Upload
Apa itu PHP Ajax Image Upload
PHP Ajax Image Upload adalah metode upload gambar yang memanfaatkan bahasa pemrograman PHP dan teknologi Ajax. Dalam era yang semakin didominasi oleh konten visual, kemampuan untuk mengupload gambar dengan mudah dan cepat menjadi sangat penting, baik untuk pengguna maupun developer.
Dalam pengembangan web, PHP merupakan salah satu bahasa pemrograman yang populer dan sering digunakan. Dalam hal ini, PHP digunakan untuk mengelola proses upload gambar ke server. Sedangkan Ajax, singkatan dari Asynchronous JavaScript and XML, digunakan untuk memperbarui halaman web tanpa harus memuat ulang halaman tersebut. Kombinasi antara PHP dan Ajax memungkinkan pengguna mengupload gambar secara asinkron, tanpa harus menunggu proses upload selesai atau halaman reload.
Salah satu keuntungan dari PHP Ajax Image Upload adalah kecepatan dan kemudahan penggunaan. Dengan menggunakan Ajax, pengguna dapat melihat progress bar yang menunjukkan berapa persen file sudah terupload. Hal ini membuat pengguna lebih nyaman dan mengurangi rasa bosan yang mungkin muncul ketika harus menunggu proses upload selesai.
HTML Image Upload Form
Script berikut berfungsi untuk form upload image. Saat mengirimkan form, fungsi AJAX akan dipanggil untuk mengirim permintaan ke script upload image PHP.
<form id="uploadForm" action="upload.php" method="post"> <label>Upload Image File:</label><br/> <input name="userImage" type="file" class="inputFile" /> <input type="submit" value="Submit" class="btnSubmit" /> </form>
PHP Image Upload dengan AJAX Method
Script ini menunjukkan fungsi ajax () yang digunakan untuk mengirim permintaan unggah file dengan memposting contoh FormData. Setelah upload image berhasil, fungsi akan mencetak image HTML yang diunggah sebagai respon AJAX.
<script type="text/javascript">
$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){}
});
}));
});
</script>
Penutup
Hasil bisa sobat lihat setelah running menggunakan localhost dan script ini ferhubung langsung ke dalam website, sobat hanya perlu untuk menambahkan CSS atau menempatkan form ini kedalam website yang sudah jadi.