Cette fois, je vais vous montrer comment créer un composant de prévisualisation de téléchargement d'image dans H5. Quelles sont les précautions pour créer un composant de prévisualisation de téléchargement d'image dans H5. Voici un cas pratique, jetons un coup d'œil. .
Mon environnement de développement est Windows 10 et les navigateurs de test sont Chrome et Firefox
Si vous rencontrez des navigateurs incompatibles, vous pouvez essayer de mettre à niveau le navigateur ou de le rechercher sur Google (~￣▽￣)~
1 .Sélection unique et sélection multiple de fichiers
Par défaut, est une sélection unique. L'ajout de l'attribut multiple permet une sélection multiple de fichiers
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>单选:<input type="file"/></label>
<label>多选:<input type="file" multiple="multiple"/></label>
</body></html>2. Obtenez l'objet fichier
Ouvrez la console du navigateur et sélectionnez le fichier pour voir les modifications de la console
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
<script>
function getFilesInfo(f){ console.log(f);
} </script>
<label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
<script>
function getFilesInfo2(evt) { var files = evt.target.files;
console.log(files);
} document.getElementById('files').addEventListener('change', getFilesInfo2, false); </script>
<label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
<script>
function getFilesInfo3(){ var files=document.getElementById("fileInput").files; console.log(files);
} </script>
</body></html>3. Attributs communs
Dans la seconde. Étape que nous avons déjà vue, j'ai vu le fichier dans la console. Développez-le et jetons un coup d'œil aux attributs communs
Description des attributs communs :
nom-nom du fichier
taille-taille<🎜. >type-file type
lastModified-Date de la dernière modification
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="file" id="files" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
var output = [];
for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>a dit Pour télécharger et prévisualiser des images, vous devez filtrer la taille et le format des fichiers téléchargés
En supposant que nous autorisons uniquement le téléchargement de jpg et png et que la taille du fichier est inférieure à 2 Mo, c'est très simple et vous pouvez jugez uniquement les informations sur les fichiers Si vous ne connaissez pas les types de fichiers que vous souhaitez filtrer, vous pouvez vérifier les types de fichiers dans la console, puis copier et coller
Bien sûr, vous pouvez également définir accept="image. /*" dans la balise d'entrée pour autoriser uniquement la saisie de fichiers image
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>过滤出图片</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>L'aperçu est implémenté en créant dynamiquement des balises img et en liant ObjectURL à l'attribut src de la balise img
Exemple<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>预览</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
output.push("![]("+URL.createObjectURL(f)+")");
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body></html>Exemple
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>简单预览示例</h3>
<label id="fileBox" style="border: 1px #ccc solid;display:block;width: 100px;height:100px;background-clip:border-box;background-origin:padding-box;background-size:cover">
<input type="file" hidden="hidden" style="display: none;" onchange="fileSelect(this.files)"/>
</label>
<script>
function fileSelect(f) {
if(!f){ return;
}
f=f[0]; if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){ document.getElementById('fileBox').style.backgroundImage="url(" + URL.createObjectURL(f)+ ")";
}
} </script>
</body> </html>Lecture connexe :
Comment utiliser s-xlsx pour importer et exporter des fichiers ExcelComment utiliser JavaScript pour enregistrer les données texte Extension de téléchargement de fichiers à l'aide de jQueryCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
Introduction aux composants Laravel
Raisons de l'exception DNS
Que sont les bases de données non relationnelles ?
Utilisation de promesse
Quelle résolution est 1080p ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
