Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

February 5, 2019

9 Comments

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP – Hai sobat ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan memposting tentang Cara mengupload file menggunakan Ajax Tanpa loading. Seperti yang sudah saja janjikan pada postingan saya sebelumnya yang membahas tentang upload file menggunakan php. Pada postingan ini tentunya akan sedikit lebih sulit namun tentunya hasilnya akan lebih bagus dan kita bisa membuatnya tanpa loading saat mengupload. Pada cara ini kita tidak membutuhkan form action dan enctype=”multipart/form-data” karena kita mengambil filenya menggunakan Ajax. J

ika sobat ingin mengganti nama file menggunakan kata acak maka sobat perlu melihatnya pada postingan saya sebelumnya terlebih dahulu karena pada postingan ini saya akan memberikan contoh dengan menggunakan contoh lain yaitu sebelum kita mengupload file maka kita tentukan terlebih dahulu nama filenya atau nama file diamis.

Cara Mengupload dengan Hapus Gambar menggunakan Ajax dan PHP

Cara Upload Gambar dari URL Menggunakan Ajax dan PHP

Cara Mengupload File dengan Ajax Tanpa Loading pada PHP

Cara Membuat Upload File Dengan Progressbar Menggunakan Ajax pada PHP

CRUD (Create, Read, Update, Delete) Dengan Ajax Tanpa Loading PHP

Membuat Upload dan Resize/Compress Gambar denga Ajax pada PHP

Cara Membuat Upload dan Ekstrak Zip pada PHP

Cara Membuat Upload Multiple Image dengan Ajax dan Bootstrap Modal

Langsung saja saya berikan caranya yaitu :

1. Pertama sobat masukkan dulu librari dari jquery.min.js, pada contoh saya contohkan menggunakan online namun jia sobat ingin membuatnya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu. Kode ini dimasukkan pada tag <body> paling bawah seperti berikut

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Kemudian buat formnya terlebih dahulu, pada contoh saya buat input file, input text untuk nama filenya dan tombol. Saya membuatnya pada index.php dan isinya adalah sebagai berikut

<form id="form-data">
	<div class="form-group">
		<label>Nama File</label>
		<input type="text" name="nama_file" id="nama_file" class="form-control" />
	</div>
	<div class="form-group">
		<label>File Upload</label>
		<input type="file" name="fileupload" id="fileupload" class="form-control" />
	</div>
	<div class="form-group">
		<input type="button" name="upload" id="upload" value="Upload" class="btn btn-info mt-3" />
	</div>
</form>

</div>

<label>File Upload</label>

</div>

</div>

</form>

3. Kemudian kita membuat ajaxnya namun sebelum ajax dijalankan kita perlu membuat validasi bahwa user harus mengisi nama file dan filenya.

<script>
	$(document).ready( function () {
		$("#upload").click(function(){
			const fileupload = $('#fileupload').prop('files')[0];
			var nama_file = $('#nama_file').val();

			if (nama_file!="" && fileupload!="") {
		        let formData = new FormData();
		        formData.append('fileupload', fileupload);
		        formData.append('nama_file', nama_file);

		        $.ajax({
		            type: 'POST',
		            url: "upload.php",
		            data: formData,
		            cache: false,
		            processData: false,
		            contentType: false,
		            success: function (msg) {
		                alert(msg);
		                document.getElementById("form-data").reset();
		            },
		            error: function () {
		                alert("Data Gagal Diupload");
		            }
		        });
		    }
        });
    });
</script>

$(document).ready( function () {

$("#upload").click(function(){

const fileupload = $('#fileupload').prop('files')[0];

var nama_file = $('#nama_file').val();

if (nama_file!="" && fileupload!="") {

let formData = new FormData();

formData.append('fileupload', fileupload);

formData.append('nama_file', nama_file);

$.ajax({

type: 'POST',

url: "upload.php",

data: formData,

cache: false,

processData: false,

contentType: false,

success: function (msg) {

alert(msg);

document.getElementById("form-data").reset();

error: function () {

alert("Data Gagal Diupload");

}

});

}

});

</script>

Penjelasan :

Kode dibawah ini adalah event jika tombol dengan id=”upload” diklik

$("#upload").click(function(){

1	$("#upload").click(function(){

Sedangkan kode dibawah adalah untuk mengambil filenya dan kemudian disimpan pada form data

const fileupload = $('#fileupload').prop('files')[0];

1	const fileupload = $('#fileupload').prop('files')[0];

Tidak seperti jika sobat menyimpan data dalam bentuk string, jika kita ingin menyimpan data menggunakan ajax dan berisi file juga maka kita perlu menggunakan form data cara penggunaanya tertulis pada baris berikut

let formData = new FormData();
formData.append('fileupload', fileupload);
formData.append('nama_file', nama_file);

let formData = new FormData();

formData.append('fileupload', fileupload);

formData.append('nama_file', nama_file);

Dan untuk mengirimnya pada ajax tentunya kita perlu menambahkan baris berikut

data: formData,
cache: false,
processData: false,
contentType: false,

data: formData,

cache: false,

processData: false,

contentType: false,

4. Pada perintah ajax pada url tertulis upload.php yang berarti kita perlu membuat file upload.php kemudian sobat isikan dengan script dibawah ini

<?php
  $temp = "upload/";
  if (!file_exists($temp))
    mkdir($temp);

  $nama_file       = $_POST['nama_file'];
  $fileupload      = $_FILES['fileupload']['tmp_name'];
  $ImageName       = $_FILES['fileupload']['name'];
  $ImageType       = $_FILES['fileupload']['type'];

  if (!empty($fileupload)){
    $ImageExt       = substr($ImageName, strrpos($ImageName, '.'));
    $ImageExt       = str_replace('.','',$ImageExt); // Extension
    $ImageName      = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);
    $NewImageName   = str_replace(' ', '', $nama_file.'.'.$ImageExt);

    move_uploaded_file($_FILES["fileupload"]["tmp_name"], $temp.$NewImageName); // Menyimpan file

    echo "Data Berhasil Diupload";
  } else {
    echo "Data Gagal Diupload";
  }
?>

<?php

$temp = "upload/";

if (!file_exists($temp))

mkdir($temp);

$nama_file = $_POST['nama_file'];

$fileupload = $_FILES['fileupload']['tmp_name'];

$ImageName = $_FILES['fileupload']['name'];

$ImageType = $_FILES['fileupload']['type'];

if (!empty($fileupload)){

$ImageExt = substr($ImageName, strrpos($ImageName, '.'));

$ImageExt = str_replace('.','',$ImageExt); // Extension

$ImageName = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);

$NewImageName = str_replace(' ', '', $nama_file.'.'.$ImageExt);

move_uploaded_file($_FILES["fileupload"]["tmp_name"], $temp.$NewImageName); // Menyimpan file

echo "Data Berhasil Diupload";

} else {

echo "Data Gagal Diupload";

}

Karena kodenya sama seperti pada tutorial sebelumnya tentang upload file dan menurut saya kodenya juga mudah untuk dimengerti jadi tidak saya jelaskan lagi.

5. Jika sobat sudah selesai maka sobat bisa jalankan project dan hasilnya akan menjadi seperti gambar dibawah

dan jika sobat mengupload file maka akan secara otomatis akan terbuat folder upload dan telah terisi dengan file yang sobat upload tadi seperti dibawah tentunya dengan menghapus spasi karena tentunya spasi akan sangat repot nantinya

Bagaimana mudah bukan? namun tentunya jika sobat belum terbiasa menggunakan Ajax agak sedikit sulit dan akan lebih memilih cara yang pertama. Namun dengan membaca tutorial ini tentunya kita tidak akan kesulitan lagi seperti yang saya alami pertama kali saat menggunakan ajax khusunya pada upload file ini karena di awal saya belum mengerti bedanya mengirim string dan mengirim file Multipart menggunakan ajax.

Sekian postingan saya tentang Cara Mengupload File dengan Ajax Tanpa Loading pada PHP. Jika ada pertanyaan atau ada eror silahkan sobat tinggalkan pada kolom komentar dibawah. Tunggu postingan saya yang lain tentang file upload juga karena masih banyak yang bisa saya bagikan seperti menambahkan progress bar atau mengupload multiple file secara dinamis.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..