File "subir.php"
Full Path: C:/wamp64/www/AVIDOTAPP/views/anexos/subir.php
File size: 6.22 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cargar Soporte de Entrega de Dotación</title>
<link rel="icon" type="image/png" href="assets/img/icono.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
min-height: 100vh;
background: linear-gradient(225deg, #d0101d, #752b2a);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.upload-card {
background: #fff;
border-radius: 20px;
width: 100%; max-width: 680px;
padding: 50px 60px;
box-shadow: 10px 10px 20px 0 rgba(0,0,0,.3);
text-align: center;
}
.upload-card h2 { color: #d0101d; font-weight: 700; }
.drop-zone {
border: 3px dashed #d9534f;
border-radius: 12px;
padding: 40px 20px;
cursor: pointer;
transition: background .2s;
}
.drop-zone:hover, .drop-zone.dragover { background: #fff5f5; }
.drop-zone i { font-size: 3rem; color: #d9534f; margin-bottom: 10px; }
.file-list { text-align: left; margin-top: 15px; max-height: 200px; overflow-y: auto; }
.file-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
background: #f8f9fa; border-radius: 6px; margin-bottom: 6px; font-size: .9rem; }
.file-item i { color: #d0101d; }
.progress { display: none; height: 8px; border-radius: 4px; margin-top: 15px; }
.btn-cargar { background: linear-gradient(225deg,#d0101d,#752b2a); color: #fff; border: none; min-width: 160px; }
.btn-cargar:hover { background: linear-gradient(225deg,#b00e1a,#632422); color: #fff; }
</style>
</head>
<body>
<div class="upload-card">
<img src="assets/img/icono.png" alt="" width="60" class="mb-3" onerror="this.style.display='none'">
<h2><i class="fas fa-upload me-2"></i>Cargar Soporte de Entrega</h2>
<hr>
<?php if (!empty($msg_ok)): ?>
<div class="alert alert-success text-start"><i class="fas fa-check-circle me-2"></i><?= $msg_ok ?></div>
<?php endif; ?>
<?php if (!empty($msg_err)): ?>
<div class="alert alert-danger text-start"><i class="fas fa-exclamation-triangle me-2"></i><?= $msg_err ?></div>
<?php endif; ?>
<form id="formUpload" method="post"
action="index.php?controller=Anexo&action=upload"
enctype="multipart/form-data">
<!-- Zona de arrastre -->
<div class="drop-zone" id="dropZone" onclick="document.getElementById('archivoInput').click()">
<i class="fas fa-cloud-upload-alt d-block"></i>
<p class="mb-1 fw-bold">Haz clic o arrastra tus archivos aquí</p>
<small class="text-muted">PDF, imágenes, Word, Excel — múltiples archivos permitidos</small>
<input type="file" id="archivoInput" name="archivo[]" multiple required
style="display:none" accept="*/*">
</div>
<!-- Lista de archivos seleccionados -->
<div class="file-list" id="fileList"></div>
<!-- Barra de progreso -->
<div class="progress" id="progressBar">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger"
role="progressbar" style="width:100%"></div>
</div>
<div class="d-flex gap-2 justify-content-center mt-4 flex-wrap">
<a href="index.php?controller=Dashboard&action=index" class="btn btn-secondary btn-lg">
<i class="fas fa-arrow-left me-2"></i>Regresar
</a>
<button type="submit" class="btn btn-cargar btn-lg" id="btnCargar">
<i class="fas fa-cloud-upload-alt me-2"></i>Cargar
</button>
<a href="index.php?controller=Anexo&action=visualizar" class="btn btn-outline-secondary btn-lg">
<i class="fas fa-folder-open me-2"></i>Visualizar Anexos
</a>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('archivoInput');
const fileList = document.getElementById('fileList');
const progressBar = document.getElementById('progressBar');
const btnCargar = document.getElementById('btnCargar');
// Iconos por extensión
function iconForFile(name) {
const ext = name.split('.').pop().toLowerCase();
const icons = { pdf:'fa-file-pdf text-danger', doc:'fa-file-word text-primary',
docx:'fa-file-word text-primary', xls:'fa-file-excel text-success',
xlsx:'fa-file-excel text-success', jpg:'fa-file-image text-warning',
jpeg:'fa-file-image text-warning', png:'fa-file-image text-warning',
gif:'fa-file-image text-warning', txt:'fa-file-alt text-info' };
return 'fas ' + (icons[ext] || 'fa-file text-secondary');
}
function renderFiles(files) {
fileList.innerHTML = '';
if (!files.length) return;
Array.from(files).forEach(f => {
fileList.innerHTML += `<div class="file-item">
<i class="${iconForFile(f.name)}"></i>
<span class="text-truncate flex-grow-1">${f.name}</span>
<small class="text-muted">${(f.size/1024).toFixed(1)} KB</small>
</div>`;
});
}
fileInput.addEventListener('change', () => renderFiles(fileInput.files));
// Drag & drop
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
dropZone.addEventListener('drop', e => {
e.preventDefault();
dropZone.classList.remove('dragover');
const dt = new DataTransfer();
Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f));
fileInput.files = dt.files;
renderFiles(fileInput.files);
});
// Mostrar progress al enviar
document.getElementById('formUpload').addEventListener('submit', function() {
if (!fileInput.files.length) return;
progressBar.style.display = 'block';
btnCargar.disabled = true;
btnCargar.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Cargando...';
});
</script>
</body>
</html>