<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dosya Yöneticisi <title>Dosya Yöneticisi</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.file-item {
display: flex;
justify-content: space-between;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>

Dosya Yöneticisi

<button id="uploadBtn">Yükle</button>

Dosyalar:

<div id="fileList"></div>

<script>
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');

// Yüklenen dosyaları tutmak için bir liste
const uploadedFiles = [];

// Dosyaları yükleme
document.getElementById('uploadBtn').addEventListener('click', () => {
const files = fileInput.files;

if (files.length === 0) {
alert('Lütfen bir dosya seçin!');
return;
}

Array.from(files).forEach(file => {
// Dosyayı listeye ekleyelim
uploadedFiles.push(file);

// Dosyayı listeye ekrana yaz
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `
<span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
<button onclick="deleteFile('${file.name}')">Sil</button>
`;
fileList.appendChild(fileItem);
});

// Input temizle
fileInput.value = '';
});

// Dosya silme
function deleteFile(fileName) {
const index = uploadedFiles.findIndex(file => file.name === fileName);
if (index > -1) {
uploadedFiles.splice(index, 1); // Dosyayı listeden çıkar
renderFiles(); // Ekranı güncelle
}
}

// Ekranı güncelleme
function renderFiles() {
fileList.innerHTML = '';
uploadedFiles.forEach(file => {
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `
<span>${file.name} (${(file.size / 1024).toFixed(2)} KB)</span>
<button onclick="deleteFile('${file.name}')">Sil</button>
`;
fileList.appendChild(fileItem);
});
}
</script>