Cara Membuat Multiple Upload File dengan Ajax PHP

Pada hari minggu yang cerah ini, disini saya ingin memberikan sebuah tutorial lagi mengenai ajax dimana untuk kali ini kita akan belajar cara membuat multiple upload file dengan Ajax PHP, jadi kita bisa mengupluoad file lebih dari satu, keren bukan jadi bisa lebih praktis tidak perlu repot-repot lagi harus satu persatu, tapi dengan cara ini teman-teman bisa lebih dari satu sekaligus, oke seperti apa simak terus ya teman-teman.

untuk belajar membuat ini teman-teman harus sudah bisa php dan ajaxnya ya, apa lagi disini saya menggunakan ajax jquery, cara membuat multiple upload file sering saya jumpai apalagi teman-teman yang kemarin ikut tes CPNS pasti saat upload filenya lebih dari satu benar bukan, untuk membuat seperti itu teman-teman bisa lihat caranya disini, cukup simple, karena kuncinya disini saya menamabahkan attribute multiple, dan name di file itu saya buat array, oke langsung saja template dan ajaxnya seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Multiple Upload File dengan Ajax PHP</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row mt-3 ">
    <div class="col-md-8 offset-md-2">
      <h1 class="text-center border-bottom pb-3">Cara Membuat Multiple Upload File dengan Ajax PHP</h1>
      <form class="form-inline justify-content-between" method="post">
        <div class="form-group">
          <label for="fileInput">Upload File disini</label>
          <input type="file" name="files[]" class="form-control-file" multiple>
        </div>
        <button type="submit" class="btn btn-primary">Upload</button>
      </form>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-md-8 offset-md-2">
      <div class="galleryUpload d-flex justify-content-between"></div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(document).ready(function(){
    $("form").on("submit", function(e){
      e.preventDefault()
      $.ajax({
        url: "upload.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function(data){
          $(".galleryUpload").html(data)
          alert("gambar berhasil di upload")
        }
      })
    })
  })
</script>
</body>
</html>

Seperti yang dilihat proses webservicenya ada di upload.php dimana proses uploadnya seperti ini

<?php  
$output = "";
if(is_array($_FILES)){
  foreach ($_FILES['files']['name'] as $name => $value) {
    $file_name = explode(".", $_FILES['files']['name'][$name]);
    $allowed_ext = array("jpg", "jpeg", "png", "gif", "PNG", "JPEG", "JPG");
    if(in_array($file_name[1], $allowed_ext)){
      $new_name = md5(rand()).'.'.$file_name[1];
      $sourcePath = $_FILES['files']['tmp_name'][$name];
      $targetPath = "upload/".$new_name;
      if(move_uploaded_file($sourcePath, $targetPath)){
        $output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';
      }
    }
  }
  echo $output;
}

?>

supaya tidak sama dengan file lain nama dari file yang kita upload itu kita rand atau kita acak, supaya bisa tersimpan di dalam folder upload, untuk tipe filenya sudah saya atur berdasarkan yang sudah saya tetapkan, oke seperti apa hasilnya, jika dilihat maka hasilnya akan seperti ini

oke gambar di atas adalah ketika saya sudah berhasil mengupload sebuah file, kebetulan file untuk kali ini saya khususkan untuk sebuah gambar ya, jadi selain gambar maka tidak akan bisa, oke jadi seperti itu saja cara membuat multiple upload file dengan Ajax PHP semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Membuat Multiple Upload File dengan Ajax PHP

Kategori