Upload File dengan Ajax ~ Pemrograman dan Teknologi

Kita juga bisa mengupload file dengan ajax sehingga kita tidak bisa tetap di halaman yang sama hingga upload selesai. Kita bisa menggunakan FormData untuk menambahkan data dari input sebelum dikirim ke file php yang akan memproses file tersebut menggunakan send.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
</HEAD>
<BODY>
 <input type="file" name="images" id="gambar" />
 <script>
 var gambar=document.getElementById("gambar");
 gambar.onchange=function(){
 var koneksi=new XMLHttpRequest();
 var fdt=new FormData();
 var fl=gambar.files[0];
     fdt.append("images[]", fl);
     koneksi.open("POST", "kodeku.php", false);
     koneksi.send(fdt);
     alert(koneksi.response);
 }
 </script>
 </BODY> 
</HTML>

Pada contoh di atas kita menggunakan FormData untuk mengirim data dengan "POST". Dalam kode PHP "tujuan", kita bisa mengaksesnya melalui $_FILES karena yang kita kirimkan adalah file. Berikut ini adalah contoh PHP yang bisa kita gunakan untuk upload. Anggap saja namanya upload.php jika source codenya seperti di atas.

<?php
foreach ($_FILES["images"]["error"] as $key => $error) {
  if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
  }
}
echo "<h2>Berhasil meng-upload file</h2>";
?>

Beri nama dengan kodeku.php dan letakkan di folder yang sama dengan file yang menggunakan ajax tadi. Kemudian, kode buka file yang berisi Ajax lewat localhost atau website.

Untuk yang malas mengetik, ambil source codenya di sini!