Cara Upload Banyak Image dengan JavaScript dan PHP

Menambahkan beberapa elemen file untuk mengunggah banyak file memakan waktu dan Anda perlu menulis beberapa kode tambahan untuk ini

Anda dapat melakukannya dengan satu elemen file dengan mengaktifkan beberapa pilihan file.

Baca file yang dipilih dan tambahkan objek FormData untuk diteruskan ke file AJAX untuk diunggah.

Dalam tutorial ini, saya menunjukkan bagaimana Anda dapat mengunggah banyak file dengan JavaScript dan PHP.

1. HTML

Buat file dan elemen tombol. Untuk mengaktifkan beberapa pilihan file, tambahkan multipleatribut di elemen file.

Menambahkan onclickacara pada tombol yang memanggil uploadFile()fungsi.

Kode Lengkap

<div>
  <input type = "file" name = "files" id = "files" multiple>
  <input type = "button" id = "btn_uploadfile" 
     value = "Unggah" 
     onclick = "uploadFile ();" >
</div>

2. PHP

Buat ajaxfile.phpfile dan uploadsfolder untuk menyimpan file.

Hitung total file dan tetapkan ke $countfiles. Tetapkan lokasi unggahan ke $upload_location.

Buat countvariabel untuk menyimpan jumlah file yang berhasil diunggah.

Ulangi file. Baca nama file dan buat jalur file.

Baca ekstensi file dan tetapkan ekstensi file yang valid ke $valid_extArray.

Jika ekstensi file ada di $valid_extArray, unggah file dan tambahkan $count1.

Kembali $count.

Kode Lengkap

<? php

// Hitung total file
$ countfiles = hitung ($ _ FILES ['file'] ['nama']);

// Unggah direktori
$ upload_location = "uploads /";

$ hitung = 0;
untuk ($ i = 0; $ i <$ countfiles; $ i ++) {

   // Nama file
   $ filename = $ _FILES ['file'] ['nama'] [$ i];

   // Jalur file
   $ path = $ upload_location. $ nama file;

   // ekstensi file
   $ file_extension = pathinfo ($ path, PATHINFO_EXTENSION);
   $ file_extension = strtolower ($ file_extension);

   // Ekstensi file yang valid
   $ valid_ext = larik ("pdf", "doc", "docx", "jpg", "png", "jpeg");

   // Periksa ekstensi
   if (in_array ($ file_extension, $ valid_ext)) {

      // Unggah data
      if (move_uploaded_file ($ _ FILES ['files'] ['tmp_name'] [$ i], $ path)) {
        $ hitung + = 1;
      } 
   }

}

echo $ count;
keluar;

3. JavaScript

Buat uploadFile()fungsi yang membutuhkan klik tombol.

Tetapkan jumlah total file yang dipilih dalam totalfilesvariabel. Jika totalfilestidak lebih besar dari 0 dari alert("Please select a file");.

Jika totalfiles > 0kemudian buat FormDataobjek dan loop pada file yang dipilih dan tambahkan FormDataobjek.

Untuk mengirim permintaan AJAX buat objek XMLHttpRequest. Dengan open() metode set metode permintaan ke "POST" dan jalur file AJAX.

Tangani panggilan balik AJAX yang berhasil dengan onreadystatechange() metode. Tetapkan this.responseTextke responsevariabel dan beri tahu response.

Lewati formData objek dengan send() metode.

Kode Lengkap

// Unggah data
function uploadFile () {

  var totalfiles = document.getElementById ('files'). files.length;

  if (totalfiles> 0) {

    var formData = new FormData ();

    // Baca file yang dipilih
    untuk (var index = 0; index <totalfiles; index ++) {
      formData.append ("files []", document.getElementById ('files'). files [index]);
    }

    var xhttp = new XMLHttpRequest ();

    // Set metode POST dan jalur file ajax
    xhttp.open ("POST", "ajaxfile.php", true);

    // panggilan atas permintaan perubahan status
    xhttp.onreadystatechange = function () {
       jika (this.readyState == 4 && this.status == 200) {

          var response = this.responseText;

          alert (response + "File diupload.");

       }
    };

    // Kirim permintaan dengan data
    xhttp.send (formData);

  }lain{
    alert ("Silakan pilih file");
  }

}

4.Hasil