Vanilla JavaScript Ajax Dosya Yüklemek
-
28 Aralık 2022 • 20 dakikalık okuma
Vanilla JavaScript (kısaltması: VanillaJS), harici bir altyapı ya da kütüphane kullanmadan sadece temel JavaScript kodları kullanılarak yapılan geliştirme Vanilla JavaScript olarak adlandırılır.
Vanilla JS Ajax Dosya Yüklemek
Dosya yüklemek için html sayfasına bir file input, sunucuya göndermek için submit input button ve ilerlemeyi göstermek için bir p paragraf html etiketi eklenir;
Kod
// uploadFile.html
<input type="file" id="file-upload" name="file-upload" />
<input type="submit" value="Dosya Yükle" onclick="return uploadFile()" />
<p id="progresbar"></p>
Dosya yükle butonuna tıklanıldığında çağrılan uploadFile javascript fonksiyonu eklenir; İlgili fonksiyon istemci tarafından ajax isteği yapar seçilen dosyayı FormData olarak gönderir.
Kod
<script type="text/javascript">
function uploadFile() {
xHttpRequest = new XMLHttpRequest();
xHttpRequest.onreadystatechange = function () {
if (xHttpRequest.status) {
if (xHttpRequest.status == 200 && (xHttpRequest.readyState == 4)) {
//To do tasks if any, when upload is completed
console.log('İşlem tamamlandı. Gelen yanıt: ', xHttpRequest.response);
document.getElementById('progresbar').innerText = 'Kayıt işlemi başarıyla tamamlandı.';
}
}
}
var formData = getFiles("file-upload");
if (formData) {
xHttpRequest.open("POST", '/upload', true);
xHttpRequest.send(formData);
}
return false;
}
function getFiles(fileUploadId) {
var result = null;
if (window.FormData !== undefined) {
var fileUpload = document.getElementById(fileUploadId);
var files = fileUpload.files;
// Create FormData object
var formData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
result = formData;
} else {
alert("FormData is not supported.");
}
return result;
}
</script>
Dosya yüklenirken ilerlemeyi gösterebilmek için process olayını dinleyecek olan eventListener eklenir;
Kod
xHttpRequest.upload.addEventListener("progress", function (event) {
var percent = ((event.loaded / event.total) * 100).toFixed();
//**percent** variable can be used for modifying the length of your progress bar.
});
Böylelikle yükleme devam ettikçe dinlenen process adlı olay, eklenen callback fonksiyonunu çalıştırır ve böylece yüklenen dosya bilgileri hesaplanabilir;
Kod
// uploadFile.html
<input type="file" id="file-upload" name="file-upload" />
<input type="submit" value="Dosya Yükle" onclick="return uploadFile()" />
<p id="progresbar"></p>
<script type="text/javascript">
function uploadFile() {
xHttpRequest = new XMLHttpRequest();
xHttpRequest.onreadystatechange = function () {
if (xHttpRequest.status) {
if (xHttpRequest.status == 200 && (xHttpRequest.readyState == 4)) {
//To do tasks if any, when upload is completed
console.log('İşlem tamamlandı. Gelen yanıt: ', xHttpRequest.response);
document.getElementById('progresbar').innerText = 'Kayıt işlemi başarıyla tamamlandı.';
}
}
}
xHttpRequest.upload.addEventListener("progress", function (event) {
var percent = ((event.loaded / event.total) * 100).toFixed();
//**percent** variable can be used for modifying the length of your progress bar.
document.getElementById('progresbar').innerText = '%' + percent + ' yüklendi.';
if (percent == '100') {
document.getElementById('progresbar').innerText = (document.getElementById('progresbar').innerText + ' Kaydediliyor...');
}
});
var formData = getFiles("file-upload");
if (formData) {
xHttpRequest.open("POST", '/upload', true);
xHttpRequest.send(formData);
}
return false;
}
function getFiles(fileUploadId) {
var result = null;
if (window.FormData !== undefined) {
var fileUpload = document.getElementById(fileUploadId);
var files = fileUpload.files;
// Create FormData object
var formData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
result = formData;
} else {
alert("FormData is not supported.");
}
return result;
}
</script>
process adlı olayın callback fonksiyonundaki percent değeri sayfaya yazdırılabilir ya da bir progress bar öğesini güncelleyerek görsel olarak yükleme durumu gösterilebilir;
Kaynaklar
- What is VanillaJS? , stackoverflow.com, 14.08.2022 tarihinde alındı.
- Ajax (programming) , en.wikipedia.org, 14.08.2022 tarihinde alındı.
- How to use AJAX in vanilla JavaScript without jQuery , kcode.co.za, 14.08.2022 tarihinde alındı.
- Send Ajax GET and POST requests , plainjs.com, 14.08.2022 tarihinde alındı.
- How TO - File Upload Button , w3schools.com, 27.12.2022 tarihinde alındı.
- File upload progress bar with jQuery , stackoverflow.com, 27.12.2022 tarihinde alındı.
- JavaScript | addEventListener() with Examples , geeksforgeeks.org, 27.12.2022 tarihinde alındı.
Beğen