Input
File
Upload
Html
Css
Js
Collection d'exemples de champs input file avec styles personnalises, interactions JS et interfaces d'upload modernes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippets Input Files Style 01 | AngularForAll</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
min-height: 100vh;
padding: 2rem;
font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
color: #e2e8f0;
}
h1 {
text-align: center;
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle {
text-align: center;
color: #94a3b8;
margin-bottom: 2.5rem;
font-size: 1.2rem;
}
/* Grille d'exemples */
.examples-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Carte d'exemple */
.example-card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
border-radius: 24px;
padding: 1.8rem;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.2s;
}
.example-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.2);
}
.example-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #f1f5f9;
display: flex;
align-items: center;
gap: 8px;
}
.example-desc {
color: #94a3b8;
font-size: 0.9rem;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 1px dashed #475569;
}
/* Styles communs pour les inputs */
.file-input-wrapper {
margin-bottom: 1rem;
}
.preview-area {
margin-top: 1rem;
min-height: 60px;
}
.file-info {
font-size: 0.9rem;
color: #a5b4cb;
margin-top: 0.5rem;
word-break: break-all;
}
.image-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 1rem;
}
.preview-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 12px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.btn-custom {
background: #3b82f6;
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-size: 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-custom:hover {
background: #2563eb;
transform: scale(1.02);
}
.btn-outline {
background: transparent;
border: 2px dashed #64748b;
color: #cbd5e1;
padding: 1.5rem;
border-radius: 16px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.btn-outline:hover {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
color: white;
}
/* Drag & Drop Zone */
.drop-zone {
border: 2px dashed #64748b;
border-radius: 20px;
padding: 2rem;
text-align: center;
transition: all 0.3s;
background: rgba(0, 0, 0, 0.2);
}
.drop-zone.dragover {
border-color: #10b981;
background: rgba(16, 185, 129, 0.15);
transform: scale(1.02);
}
.drop-zone i {
font-size: 2.5rem;
color: #64748b;
margin-bottom: 0.5rem;
}
/* Liste de fichiers */
.file-list {
list-style: none;
padding: 0;
margin-top: 1rem;
}
.file-list li {
background: rgba(0, 0, 0, 0.3);
padding: 0.6rem 1rem;
border-radius: 12px;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.remove-file {
margin-left: auto;
color: #f87171;
cursor: pointer;
font-weight: bold;
padding: 0 8px;
}
.remove-file:hover {
color: #ef4444;
}
/* Input file caché */
.hidden-input {
display: none;
}
/* Responsive */
@media (max-width: 500px) {
body { padding: 1rem; }
h1 { font-size: 2rem; }
.examples-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<h1>📂 Input File · 10 Exemples</h1>
<div class="subtitle">HTML · CSS · JavaScript · Drag & Drop · Prévisualisation</div>
<div class="examples-grid">
<!-- ========== 1. INPUT FILE BASIQUE ========== -->
<div class="example-card">
<div class="example-title"><span>①</span> Input File Simple</div>
<div class="example-desc">L'input file natif du navigateur</div>
<div class="file-input-wrapper">
<input type="file" id="basicFile" style="color: white;">
</div>
<div class="file-info" id="basicInfo"></div>
</div>
<!-- ========== 2. BOUTON CUSTOMISÉ ========== -->
<div class="example-card">
<div class="example-title"><span>②</span> Bouton Personnalisé</div>
<div class="example-desc">Input caché déclenché par un bouton stylisé</div>
<input type="file" id="customFileInput" class="hidden-input" accept="image/*">
<button class="btn-custom" onclick="document.getElementById('customFileInput').click()">
📁 Choisir une image
</button>
<div class="file-info" id="customInfo"></div>
<div class="image-preview" id="customPreview"></div>
</div>
<!-- ========== 3. ACCEPTER UNIQUEMENT IMAGES ========== -->
<div class="example-card">
<div class="example-title"><span>③</span> Images Uniquement</div>
<div class="example-desc">Accept="image/*" · Prévisualisation automatique</div>
<input type="file" id="imageOnlyInput" accept="image/*" style="color: white;">
<div class="image-preview" id="imageOnlyPreview"></div>
</div>
<!-- ========== 4. FICHIERS MULTIPLES ========== -->
<div class="example-card">
<div class="example-title"><span>④</span> Sélection Multiple</div>
<div class="example-desc">Attribut "multiple" · Affiche la liste des fichiers</div>
<input type="file" id="multipleFiles" multiple style="color: white;">
<ul class="file-list" id="multipleFileList"></ul>
</div>
<!-- ========== 5. DRAG & DROP SIMPLE ========== -->
<div class="example-card">
<div class="example-title"><span>⑤</span> Drag & Drop Simple</div>
<div class="example-desc">Glissez-déposez un fichier</div>
<div class="drop-zone" id="simpleDropZone">
<div>📤</div>
<div>Glissez un fichier ici</div>
<div style="font-size: 0.8rem; opacity: 0.7;">ou</div>
<button class="btn-custom" style="margin-top: 10px;" onclick="document.getElementById('dropInput').click()">
Parcourir
</button>
</div>
<input type="file" id="dropInput" class="hidden-input">
<div class="file-info" id="dropInfo"></div>
</div>
<!-- ========== 6. DRAG & DROP AVEC PRÉVISUALISATION ========== -->
<div class="example-card">
<div class="example-title"><span>⑥</span> Drop + Prévisualisation</div>
<div class="example-desc">Glissez une image pour la voir</div>
<div class="drop-zone" id="previewDropZone">
<div>🖼️</div>
<div>Déposez une image ici</div>
</div>
<div class="image-preview" id="dropPreview"></div>
</div>
<!-- ========== 7. DRAG & DROP MULTIPLE ========== -->
<div class="example-card">
<div class="example-title"><span>⑦</span> Drop Multiple</div>
<div class="example-desc">Glissez plusieurs fichiers</div>
<div class="drop-zone" id="multipleDropZone">
<div>📚</div>
<div>Déposez vos fichiers</div>
</div>
<ul class="file-list" id="multipleDropList"></ul>
</div>
<!-- ========== 8. GALERIE DE PRÉVISUALISATION ========== -->
<div class="example-card">
<div class="example-title"><span>⑧</span> Galerie d'images</div>
<div class="example-desc">Sélection multiple avec galerie</div>
<input type="file" id="galleryInput" accept="image/*" multiple style="color: white;">
<div class="image-preview" id="galleryPreview"></div>
<button class="btn-custom" id="clearGalleryBtn" style="margin-top: 10px; background: #64748b;">
Effacer la galerie
</button>
</div>
<!-- ========== 9. AVEC RESTRICTION DE TAILLE ========== -->
<div class="example-card">
<div class="example-title"><span>⑨</span> Restriction Taille (5MB)</div>
<div class="example-desc">Alerte si fichier > 5 Mo</div>
<input type="file" id="sizeRestrictedInput" style="color: white;">
<div class="file-info" id="sizeInfo"></div>
</div>
<!-- ========== 10. UPLOAD SIMULÉ AVEC PROGRESSION ========== -->
<div class="example-card">
<div class="example-title"><span>⑩</span> Simulation Upload</div>
<div class="example-desc">Barre de progression factice</div>
<input type="file" id="uploadSimInput" style="color: white;">
<div id="progressContainer" style="margin-top: 1rem; display: none;">
<div style="background: #334155; height: 8px; border-radius: 10px; overflow: hidden;">
<div id="progressBar" style="width: 0%; height: 100%; background: #10b981; transition: width 0.1s;"></div>
</div>
<div class="file-info" id="progressText">0%</div>
</div>
<div class="file-info" id="uploadInfo"></div>
</div>
</div>
<script>
// ========== FONCTIONS UTILITAIRES ==========
// Formater la taille du fichier
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
// ========== 1. INPUT FILE BASIQUE ==========
document.getElementById('basicFile').addEventListener('change', function(e) {
const file = e.target.files[0];
const info = document.getElementById('basicInfo');
if (file) {
info.innerHTML = `📄 ${file.name} (${formatFileSize(file.size)})`;
} else {
info.innerHTML = '';
}
});
// ========== 2. BOUTON CUSTOMISÉ ==========
document.getElementById('customFileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const info = document.getElementById('customInfo');
const preview = document.getElementById('customPreview');
if (file) {
info.innerHTML = `📄 ${file.name} (${formatFileSize(file.size)})`;
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}" class="preview-img" alt="Preview">`;
};
reader.readAsDataURL(file);
} else {
preview.innerHTML = '<span style="color: #f87171;">Ce fichier n\'est pas une image</span>';
}
}
});
// ========== 3. IMAGES UNIQUEMENT ==========
document.getElementById('imageOnlyInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const preview = document.getElementById('imageOnlyPreview');
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}" class="preview-img" alt="Preview">`;
};
reader.readAsDataURL(file);
} else {
preview.innerHTML = '';
}
});
// ========== 4. FICHIERS MULTIPLES ==========
document.getElementById('multipleFiles').addEventListener('change', function(e) {
const files = Array.from(e.target.files);
const list = document.getElementById('multipleFileList');
if (files.length === 0) {
list.innerHTML = '';
return;
}
list.innerHTML = files.map((file, index) => `
<li>
<span>📄</span>
<span>${file.name} (${formatFileSize(file.size)})</span>
</li>
`).join('');
});
// ========== 5. DRAG & DROP SIMPLE ==========
const simpleDropZone = document.getElementById('simpleDropZone');
const dropInput = document.getElementById('dropInput');
const dropInfo = document.getElementById('dropInfo');
simpleDropZone.addEventListener('dragover', (e) => {
e.preventDefault();
simpleDropZone.classList.add('dragover');
});
simpleDropZone.addEventListener('dragleave', () => {
simpleDropZone.classList.remove('dragover');
});
simpleDropZone.addEventListener('drop', (e) => {
e.preventDefault();
simpleDropZone.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
displayDropFile(files[0]);
}
});
dropInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
displayDropFile(e.target.files[0]);
}
});
function displayDropFile(file) {
dropInfo.innerHTML = `📄 ${file.name} (${formatFileSize(file.size)}) · ${file.type || 'type inconnu'}`;
}
// ========== 6. DRAG & DROP AVEC PRÉVISUALISATION ==========
const previewDropZone = document.getElementById('previewDropZone');
const dropPreview = document.getElementById('dropPreview');
previewDropZone.addEventListener('dragover', (e) => {
e.preventDefault();
previewDropZone.classList.add('dragover');
});
previewDropZone.addEventListener('dragleave', () => {
previewDropZone.classList.remove('dragover');
});
previewDropZone.addEventListener('drop', (e) => {
e.preventDefault();
previewDropZone.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0 && files[0].type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
dropPreview.innerHTML = `<img src="${e.target.result}" class="preview-img" alt="Drop preview">`;
};
reader.readAsDataURL(files[0]);
} else {
dropPreview.innerHTML = '<span style="color: #f87171;">Veuillez déposer une image</span>';
}
});
// ========== 7. DRAG & DROP MULTIPLE ==========
const multipleDropZone = document.getElementById('multipleDropZone');
const multipleDropList = document.getElementById('multipleDropList');
multipleDropZone.addEventListener('dragover', (e) => {
e.preventDefault();
multipleDropZone.classList.add('dragover');
});
multipleDropZone.addEventListener('dragleave', () => {
multipleDropZone.classList.remove('dragover');
});
multipleDropZone.addEventListener('drop', (e) => {
e.preventDefault();
multipleDropZone.classList.remove('dragover');
const files = Array.from(e.dataTransfer.files);
displayMultipleFiles(files);
});
function displayMultipleFiles(files) {
if (files.length === 0) {
multipleDropList.innerHTML = '';
return;
}
multipleDropList.innerHTML = files.map((file, index) => `
<li>
<span>${file.type.startsWith('image/') ? '🖼️' : '📄'}</span>
<span>${file.name} (${formatFileSize(file.size)})</span>
</li>
`).join('');
}
// ========== 8. GALERIE DE PRÉVISUALISATION ==========
const galleryInput = document.getElementById('galleryInput');
const galleryPreview = document.getElementById('galleryPreview');
const clearGalleryBtn = document.getElementById('clearGalleryBtn');
galleryInput.addEventListener('change', function(e) {
const files = Array.from(e.target.files);
displayGallery(files);
});
function displayGallery(files) {
galleryPreview.innerHTML = '';
files.forEach(file => {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'preview-img';
galleryPreview.appendChild(img);
};
reader.readAsDataURL(file);
}
});
}
clearGalleryBtn.addEventListener('click', function() {
galleryInput.value = '';
galleryPreview.innerHTML = '';
});
// ========== 9. RESTRICTION DE TAILLE ==========
const sizeRestrictedInput = document.getElementById('sizeRestrictedInput');
const sizeInfo = document.getElementById('sizeInfo');
const MAX_SIZE = 5 * 1024 * 1024; // 5MB
sizeRestrictedInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
if (file.size > MAX_SIZE) {
sizeInfo.innerHTML = `<span style="color: #f87171;">❌ Fichier trop volumineux ! (${formatFileSize(file.size)} > 5 MB)</span>`;
sizeRestrictedInput.value = '';
} else {
sizeInfo.innerHTML = `<span style="color: #10b981;">✅ ${file.name} (${formatFileSize(file.size)}) - Taille acceptée</span>`;
}
} else {
sizeInfo.innerHTML = '';
}
});
// ========== 10. UPLOAD SIMULÉ ==========
const uploadSimInput = document.getElementById('uploadSimInput');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const uploadInfo = document.getElementById('uploadInfo');
uploadSimInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
uploadInfo.innerHTML = `📄 ${file.name} (${formatFileSize(file.size)})`;
progressContainer.style.display = 'block';
// Simulation de progression
let progress = 0;
progressBar.style.width = '0%';
progressText.textContent = '0%';
const interval = setInterval(() => {
progress += Math.random() * 15;
if (progress >= 100) {
progress = 100;
progressBar.style.width = '100%';
progressText.textContent = '100% - Upload terminé ! ✅';
clearInterval(interval);
setTimeout(() => {
progressContainer.style.display = 'none';
}, 2000);
} else {
progressBar.style.width = progress + '%';
progressText.textContent = Math.round(progress) + '%';
}
}, 200);
} else {
uploadInfo.innerHTML = '';
progressContainer.style.display = 'none';
}
});
// ========== EMPÊCHER LE COMPORTEMENT PAR DÉFAUT DU DRAG & DROP SUR LA PAGE ==========
document.addEventListener('dragover', (e) => e.preventDefault());
document.addEventListener('drop', (e) => e.preventDefault());
</script>
<div style="text-align: center; margin-top: 3rem; color: #64748b; font-size: 0.9rem;">
<hr style="border-color: #334155; margin-bottom: 1.5rem;">
<p>✨ 10 exemples d'input file avec HTML, CSS et JavaScript ✨</p>
<p>Simple · Multiple · Drag & Drop · Prévisualisation · Restrictions</p>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur