Cara Upload File Gambar Dengan Ajax Jquery (Javascript)
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);
})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);
} |
| Cara Upload File Tanpa Reload - Inponow |
CSS mana