Comment implémenter la fonction de téléchargement de fichiers en HTML5-js tutoriel-php.cn

Comment implémenter la fonction de téléchargement de fichiers en HTML5

清浅

Libérer： 2018-11-16 12:42:06

original

11123 Les gens l'ont consulté

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

(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(&#39;.file&#39;);/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange = function () {
/*初始化了一个文件读取对象*/
var reader = new FileReader();
/*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
reader.readAsDataURL(this.files[0]);
/* 加载 */
reader.onload = function () {
    /*读取完成显示图片*/
    console.log(this.result);
document.querySelector(&#39;#img&#39;).src = this.result;

}
}
</script>
</body>
</html>

Copier après la connexion

Affichage de l'effet

Avant désélectionné

Image 6.jpg