Skip to main content

Cara Upload File Gambar Dengan Ajax Jquery (Javascript)

Disini kita akan membahas cara upload file gambar tanpa reload, file dapat berupa doc, pdf, gambar jpg / png. Ok langsung saja kita mulai.

Pertama, saya menggunakan bantuan bootstrap 4 (argon admin template) untuk mempernyaman tampilan dan untuk bagian backend saya menggunakan library php codeigniter. 

Untuk bagian javascript saya tentunya menggunakan jquery dan plugin sweetalert (sweetalert untuk mempeindah alert), untuk kamu yang baru denger sweetalert pelajari selengkapnya di https://sweetalert2.github.io/.


Pada kasus kali ini saya akan membuat sebuah form input dengan 2 inputan bertype text dan 1 bertipe file. Dimana ceritanya ini merupakan form input untuk survey laporan kondisi lapangan.

Berikut ini merupakan Cara Membuat Upload File Tanpa Reload :

Pertama yaitu layouting form input. Berikut ini merupakan script html, anda dapat berkreasi sendiri dalam melakukan layouting. Jika anda ingin membuat form tanpa library anda dapat melihat artikel ini.

Yang perlu diperhatikan di layouting yaitu pemberian atribut di form berupa enctype = "multipart/form-data". 

<!-- End Navbar -->
<!-- Header -->
<div class="header bg-gradient-success pb-5 pt-5 pt-md-8">
   <div class="container-fluid">
   </div>
</div>
<!-- Page content -->
<div class="container-fluid mt--7 mb-4">
   <div class="row">
      <div class="col">
         <div class="card shadow">
            <div class="card-header bg-transparent">
               <h3 class="mb-0 sans-bold">Upload Hasil Observasi</h3>
            </div>
            <div class="card-body">
               <div class="row">
                  <div class="col-lg"></div>
                  <div class="col-lg-10">
                     <form enctype="multipart/form-data" id="myform" action="" method="post">
                        <div class="row">
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="">ID Pekerja</label>
                                 <input type="text" id="employee" class="form-control" placeholder="Ketikan ID anda..">
                              </div>
                           </div>
                           <div class="col-md-6">
                              <div class="form-group">
                                 <label for="">Informasi Gambar</label>
                                 <input type="text" id="info_file" class="form-control" placeholder="Ketikan Informasi gambar...">
                              </div>
                           </div>
                           <div class="col-md-12">
                              <div class="form-group">
                                 <label for="">Pilih Gambar</label>
                                 <input type="file" name="filenya" id="file" class="form-control" value="">
                                 <div class='preview_aja'>
                                    <img src="" id="lihat_gambar" style="width:100%">
                                 </div>
                              </div>
                           </div>
                        </div>
                        <center>
                           <button type="button" class="btn btn-success" id="save_file" style="width:30%">Save</button>
                        </center>
                     </form>
                  </div>
                  <div class="col-lg"></div>
               </div>
            </div>
            <div class="card-body">
               <hr>
               <div class="table-responsive">
                  <table style="width:100%" class="table table-flush">
                     <thead class="bg-success text-white">
                        <tr>
                           <th style="width:20%">ID Pekerja</th>
                           <th style="width:60%">Informasi Gambar</th>
                           <th style="width:60%">Gambar</th>
                        </tr>
                     </thead>
                     <tbody>
                        <?php foreach ($get as $key => $value){ ?>
                        <tr>
                           <td style="vertical-align:middle"><?= $value['employee'] ?></td>
                           <td style="vertical-align:middle"><?= $value['info_file'] ?></td>
                           <td>
                              <img src="<?= base_url($value['path_file']) ?>" alt="" style="width:100%;border-radius:5px;">
                           </td>
                        </tr>
                        <?php } ?>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Kedua, pembuatan script di javascript. Yaitu dengan membuat sebuah event listener yang berupa onclick(), yang kemudian melakukan pengecekan (apakah form input yang bertype text telah diisi semua? jika ya lanjutkan). 

Setelah itu baru kita tangkap inputan baik berupa file dan text kedalam variable new_form. script yang paling penting yaitu diantaranya new FormData() untuk menampung file dan inputan bertipe text.

Kemudian data yang telah di tampung akan di kirimkan dengan metode ajax yang tepatnya berada di data.  Pada bagian ajax script yang perlu ada untuk dapat bisa menangkap inputan bertipe file yaitu contentType: false, dan processData: false.

Untuk function alertku hanya script untuk mempermudah pemanggilan SweetAlert. JIka penulisan tersebut efektif contoh saja ok.

variable baseurl adalah variable global yang saya gunakan untuk alamat utama web saya yaitu http://localhost/InponowTutorial/.

Pada function readURL saya gunakan untuk melihat preview file yang berupa gambar dan trigger-nya berada di function  $('#file').on('change', function().

function alertku(type, title) {
     Swal.fire({
       type: type,
       title: title,
       showConfirmButton: false,
       timer: 800
     })
   }

  $('#save_file').on('click', function () {

    if ($('#employee').val() != '' && $('#info_file').val() != '') {
      let new_form = new FormData();
      const files = $('#file')[0].files[0];
      new_form.append('file', files);
      //tambahan aja
      new_form.append('employee', $('#employee').val());
      new_form.append('info_file', $('#info_file').val());
        $.ajax({
          url: baseurl + 'Monitoring/save_upload_data',
          type: 'POST',
          data: new_form,
          contentType: false,
          processData: false,
          dataType: 'JSON',
          beforeSend: function() {
            Swal.showLoading()
          },
          success: function(result) {
            if (result != null) {
              alertku('success', 'Data tersimpan')
              $('#myform')[0].reset();
              $('#lihat_gambar').attr('src', '');
              let html = `<tr>
              		   <td style="vertical-align:middle">${result.employee}</td>
              		   <td style="vertical-align:middle">${result.info_file}</td>
              		   <td>
          		    <img src="${baseurl}${result.path_file}" alt="" style="width:100%;border-radius:5px;">
        		   </td>
        		  </tr>`
              $('tbody').append(html);
            }
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.error();
            alertku('warning', 'Terdapat kesalahan...')
          }
        })
    }else {
      alertku('warning', 'Lengkapi Form Input!')
    }
  })

  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#lihat_gambar').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0])
    }else {
      $('#lihat_gambar').attr('src', '');
    }
  }

  $('#file').on('change', function() {
    readURL(this);
  })
Ketiga, pembutan script pada php untuk bagian backend-nya. Yang terpenting adalah kita dapat meneripa semua post dari ajax, baik berupa file maupun text.


Anda dapat mengeceknya dengan un-command script echo "<pre>" sampai 2 baris seletalahnya. 

Karena saya menggunakan Codeigniter 3 dalam melakukan insert data dan upload file, jadi penulisan script saya persingkat dengan gaya CI, dan untuk library upload saya telah load di function __construct.

jika anda hendak menggunakan codeigniter juga dalam kasus ini, anda dapat membaca artikel mengenai upload file di codeinter.


public function Upload($value='')
    {
      $data['get'] = $this->db->get('gambar_survey')->result_array();
      $this->load->view('template/head', $data);
      $this->load->view('menu/V_Upload', $data);
      $this->load->view('template/foot', $data);
    }

public function save_upload_data($value='')
    {
      // echo "<pre>";
      // print_r($_POST);
      // print_r($_FILES);

      // upload area
       $path = null;
       $config['upload_path'] = './assets/img/';
       $config['allowed_types'] = 'gif|jpg|png';

       $now = date('Y-m-d_H:i:s');
       $config['file_name'] = $now.'.jpg';
       $config['max_size'] = 0;

       $this->load->library('upload', $config);
       $this->upload->initialize($config);
       if (!$this->upload->do_upload('file')) {
         $error = array('error' => $this->upload->display_errors());
         // aktifkan kode di bawah ini untuk melihat pesan error saat upload file
         // echo "<pre>";
         // print_r($error);
       } else {
         array('upload_data' => $this->upload->data());
         $path = $config['upload_path'].$config['file_name'];
       }
       //end upload file area

       $data = [
         "employee" =>  strtoupper($this->input->post('employee')),
         "info_file" => strtoupper($this->input->post('info_file')),
         "path_file" => $path
         ];

        $this->M_data->addImg($data);

        echo json_encode($data);
  }
Hasil Akhir :
Cara Upload File Tanpa Reload - Inponow
Ok itu saja yang dapat saya sampaikan untuk artikel hari ini, kurang lebihnya saya mohon maaf. Terima kasih...
Location: Indonesia

Ad by Adsterra