Maison > Article > interface Web > Comment implémenter la fonction de téléchargement de fichiers en HTML5
Comment implémenter la fonction de téléchargement de fichiers en HTML5
- 清浅original
- 2018-11-16 12:42:0611042parcourir
Cet article partagera avec vous un cas utilisant HTML5 pour implémenter la fonction de téléchargement de fichiers. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde
Certaines nouvelles méthodes API en HTML5 nous permettent de le faire. implémenter certains La fonction est plus simple et des effets plus dynamiques peuvent être obtenus. Ensuite, la mise en œuvre de la fonction de téléchargement de fichiers sera présentée en détail
Points de connaissances utilisés dans le cas de mise en œuvre
(1) Multiple est un nouvel attribut en HTML5. Il est principalement utilisé pour télécharger des fichiers à valeurs multiples. Il stipule que plusieurs valeurs peuvent être sélectionnées pour le champ de saisie. Il est généralement partagé avec l'e-mail et le fichier dans l'attribut d'entrée.
(2) La méthode querySelector() est principalement utilisée pour renvoyer le premier élément du document qui correspond au sélecteur spécifié. Si vous souhaitez renvoyer tous les éléments, vous pouvez utiliser la méthode querySelectorAll() à la place.
(3) L'objet FileReader permet aux applications de lire de manière asynchrone le contenu des fichiers stockés sur l'ordinateur, en utilisant un objet File ou Blob pour spécifier le fichier ou les données à lire. L'objet File peut être un objet FileList renvoyé après sélection d'un fichier sur l'élément d5fd7aea971a85678ba271703566ebfd
(4) readAsDataURL : Afficher le fichier image lu directement sur la page Web pour obtenir un effet de prévisualisation
Affichage du code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件读取</title>
<style>
.box{
width:500px;
height:500px;
border: 1px solid #ccc;
margin:300px auto;
position: relative;
background-color:rgb(167,239,251);
}
.file{
position: absolute;
bottom:0;
left:0;
}
#img{
position: absolute;
left:100px;
bottom:30px;
}
</style>
</head>
<body>
<div>
<input type="file" multiple>
<img src="" alt="" id="img">
</div>
<script>
var file = document.querySelector('.file');/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange = function () {
/*初始化了一个文件读取对象*/
var reader = new FileReader();
/*读取文件数据 this.files[0] 文件表单元素选择的第一个文件 */
reader.readAsDataURL(this.files[0]);
/* 加载 */
reader.onload = function () {
/*读取完成显示图片*/
console.log(this.result);
document.querySelector('#img').src = this.result;
}
}
</script>
</body>
</html>Affichage de l'effet
Avant désélectionné
Après avoir sélectionné
Résumé : Ce qui précède est le contenu de cet article. J'espère vous aider à apprendre à utiliser HTML5 pour télécharger des fichiers.
Ce 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!