Unggah File AJAX – Tutorial Cepat & Tip Hemat Waktu

Unggah File AJAX – Tutorial Cepat & Tip Hemat Waktu – Unggah file melalui teknik AJAX dapat menjadi hal yang menakutkan karena banyaknya kode, apalagi tugas melelahkan yang terlibat, seperti berikut ini:

Unggah File AJAX – Tutorial Cepat & Tip Hemat Waktu

Menyiapkan sebuah XMLHttpRequestinstance
Menyiapkan berbagai penangan pada XMLHttpRequestobjek
Menyiapkan back end untuk menerima data dari permintaan AJAX
Memvalidasi formulir
Menyiapkan loop umpan balik yang efisien untuk audiens

sourcefiles – Namun, tidak ada masalah, berkat Cloudinary, solusi manajemen media ujung-ke-ujung berbasis cloud yang mengotomatiskan dan merampingkan alur kerja untuk aset media, termasuk gambar, video, dan audio. Secara khusus, Cloudinary memilih, mengunggah, menganalisis, memanipulasi, mengoptimalkan, dan mengirimkan aset tersebut ke seluruh perangkat dalam waktu singkat. Pastikan untuk mendaftar akun Cloudinary GRATIS dan coba ini sendiri.

Artikel ini menjelaskan cara mengunggah file AJAX dengan Cloudinary hanya dengan beberapa baris kode dan tidak perlu melakukan tugas di atas.

Baca juga : Skrip Pengunggahan dan Berbagi File PHP Terbaik

Langkah Awal

Sebagai langkah pertama, buat akun Cloudinary gratis , yang mencakup dasbor, nama cloud unik untuk Anda, kunci API, dan rahasia API, yang Anda perlukan untuk bekerja dengan Cloudinary.

Selanjutnya, buat preset unggahan , yang menentukan opsi yang berlaku untuk semua unggahan Anda.

Unggah File Ajax Langsung Dengan Cloudinary

Ikuti tiga langkah sederhana ini:

Membuat formulir HTML.

Di direktori root Anda, buat formulir HTML ( index.htmlfile) dengan kode berikut, yang berisi bidang untuk unggah file:

index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>AJAX File Uploads With Cloudinary</title>
</head>
<body>
<form id=”file-form” action=”fileUpload.php” method=”post” enctype=”multipart/form-data”>
Upload a File:
<input type=”file” id=”myfile” name=”myfile”>
<input type=”submit” id=”submit” name=”submit” value=”Upload File Now” >
</form>
<p id=”status”></p>
<script type=”text/javascript” src=”fileUpload.js”></script>
</body>
</html>

Bahasa kode: HTML, XML ( xml )

Anda sekarang memiliki formulir dengan elemen-elemen berikut:

Bidang inputdan submittombol.
Atribut action—di dalam formtag—yang menunjuk ke skrip yang menangani unggahan.
Atribut methodyang menentukan operasi yang postdilakukan oleh formulir ini.
Atribut enctype, yang nilainya menentukan jenis konten unggahan. Di sini, karena tugas yang dimaksud adalah
mengunggah file, jangan tentukan atributnya enctype.
Atribut iduntuk kedua bidang input, yang menangani elemen formulir dengan JavaScript.
Tambahkan perpustakaan JavaScript Cloudinary.

Plugin JavaScript di Cloudinary memfasilitasi unggahan gambar ke servernya. Sertakan dalam index.htmlfile Anda, seperti ini:

Tentukan Upload Langsung

Buat file bernama fileUpload.jsdengan yang berikut di direktori root:

$(function() {
// Configure Cloudinary
// with the credentials on
// your Cloudinary dashboard
$.cloudinary.config({ cloud_name: ‘YOUR_CLOUD_NAME’, api_key: ‘YOUR_API_KEY’});
// Upload button
var uploadButton = $(‘#submit’);
// Upload-button event
uploadButton.on(‘click’, function(e){
// Initiate upload
cloudinary.openUploadWidget({ cloud_name: ‘YOUR_CLOUD_NAME’, upload_preset: ‘YOUR_UPLOAD_PRESET’, tags: [‘cgal’]},
function(error, result) {
if(error) console.log(error);
// If NO error, log image data to console
var id = result[0].public_id;
console.log(processImage(id));
});
});
})
function processImage(id) {
var options = {
client_hints: true,
};
return ‘<img src=”‘+ $.cloudinary.url(id, options) +'” style=”width: 100%; height: auto”/>’;
}

Unggah File Ajax ke Server Backend

Untuk menangani unggahan file dengan AJAX dan menyimpan file di server backend (mis. Server PHP), buat formulir HTML dan dua skrip unggah: satu ditulis dalam JavaScript dan yang lainnya dalam PHP.:

Formulir HTML Di direktori root Anda, buat formulir HTML ( index.htmlfile) dengan kode berikut, yang berisi bidang untuk mengunggah file:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>File Uploads With AJAX</title>
</head>
<body>
<form id=”file-form” action=”fileUpload.php” method=”post” enctype=”multipart/form-data”>
Upload a File:
<input type=”file” id=”myfile” name=”myfile”>
<input type=”submit” id=”submit” name=”submit” value=”Upload File Now” >
</form>

<p id=”status”></p>
<script type=”text/javascript” src=”fileUpload.js”></script>
</body>
</html>

Bahasa kode: HTML, XML ( xml )

Perhatikan hal berikut:

Formulir berisi inputbidang dan submittombol.
Tag formmemiliki actionatribut ** yang menunjuk ke skrip yang akan menangani proses unggahan yang sebenarnya. Itu juga memiliki methodatribut yang menentukan jenis operasi yang akan dilakukan formulir ini, yaitu post.
Atribut enctype, yang nilainya menentukan jenis konten unggahan. Di sini, karena tugas yang dimaksud adalah mengunggah file, jangan tentukan atributnya enctype.
Atribut iduntuk kedua bidang input, yang menangani elemen formulir dengan JavaScript.