Berikut kami akan membagikan tutorial cara upload gambar dengan ajax php dan pastinya sangat mudah untuk dipahami oleh teman-teman.
Pada kesempatan kali ini, admin akan berbagi tutorial seputar cara upload gambar yang pastinya banyak yang ingin mencobanya. Pada tahap pembahasan kali ini, kami akan berbagi seputar cara mudah dan menerapkannya di situs anda masing – masing.
Bagaimana cara upload gambar dengan ajax php?
Tahap pertama, semua file harus anda buat dalam satu folder yang sama dan itu bisa langsung anda praktekkan di localhost XAMPP anda atau langsung di server hosting anda.
/upload_ajax/
├── index.html
├── upload.php
└── uploads/ ← (folder untuk menyimpan gambar)index.php
Langkah pertama, buat file index.php kemudian salin kode dibawah ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Upload Gambar dengan AJAX</title>
<style>
body { font-family: sans-serif; }
#preview img { max-width: 200px; margin-top: 10px; }
</style>
</head>
<body>
<h2>Upload Gambar (AJAX)</h2>
<form id="uploadForm">
<input type="file" name="image" id="imageInput" accept="image/*" required><br><br>
<button type="submit">Upload</button>
</form>
<div id="status"></div>
<div id="preview"></div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData();
const image = document.getElementById('imageInput').files[0];
if (!image) return alert("Pilih gambar terlebih dahulu.");
formData.append("image", image);
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
const status = document.getElementById('status');
const preview = document.getElementById('preview');
if (data.success) {
status.textContent = "Upload berhasil!";
preview.innerHTML = `<img src="${data.url}" alt="Preview">`;
} else {
status.textContent = "Error: " + data.error;
preview.innerHTML = "";
}
})
.catch(error => {
document.getElementById('status').textContent = "Terjadi kesalahan: " + error;
});
});
</script>
</body>
</html>upload.php
Lalu, setelah itu kemudian anda buat file baru bernama upload.php dan ini akan mengeksekusi dan memvalidasi berkas yang anda unggah diserver atau di localhost anda.
<?php
header('Content-Type: application/json');
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0755, true);
}
if (!isset($_FILES['image'])) {
echo json_encode(['success' => false, 'error' => 'Tidak ada file yang diunggah.']);
exit;
}
$file = $_FILES['image'];
$allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
$ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
if (!in_array($ext, $allowed)) {
echo json_encode(['success' => false, 'error' => 'Format file tidak diizinkan.']);
exit;
}
if ($file['size'] > 2 * 1024 * 1024) { // 2MB max
echo json_encode(['success' => false, 'error' => 'Ukuran file terlalu besar.']);
exit;
}
$newName = uniqid('img_') . '.' . $ext;
$target = $uploadDir . $newName;
if (move_uploaded_file($file['tmp_name'], $target)) {
echo json_encode(['success' => true, 'url' => $target]);
} else {
echo json_encode(['success' => false, 'error' => 'Gagal menyimpan file.']);
}
?>Buat folder upload anda untuk tempat penyimpanan gambar yang akan kita upload tadi dan pastikan folder yang anda buat sudah memiliki izin (write permission).
mkdir uploads
chmod 755 uploadsUntuk Maksimal ukuran file bisa disesuaikan di php.ini → upload_max_filesize dan post_max_size pada server hosting anda atau jika menggunakan xampp dapat anda lakukan dengan mengedit file php.ini di konfigurasi php anda pada panel xampp.
Oke, sekian informasi dari saya semoga bermanfaat
