communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > HTML5 lit un exemple de fichier local : compétences du didacticiel code_html5

HTML5 lit un exemple de fichier local : compétences du didacticiel code_html5

WBOY
Libérer： 2016-05-16 15:47:59
original
1667 Les gens l'ont consulté

Le style de structure html est le suivant :

Copier le code
Le code est le suivant :



"fichier" multiple accepter ="image/*" name="logo">

="">


En termes de style, la zone de saisie de l'élément de saisie ne doit pas être affichée. Dans ce cas, la saisie doit être définie sur un style transparent, puis recouverte. l'élément bouton. Ce n'est qu'alors que l'on peut cliquer sur le bouton pour télécharger l'image. Définissez accepté sur "image/*" pour autoriser uniquement le téléchargement de fichiers image.

Le style CSS est le suivant



Copier le codeLe code est le suivant :
.addpic{
position:relative;
margin-left:100px;
largeur:95px
hauteur:30px
}
.addlogo { arrière-plan : aucun répéter scroll 0 0 rgba(0, 0, 0, 0) ;
curseur : pointeur
taille de police : 30px ;
opacité : 0 ; 🎜>droite : 0 ;
haut : 0 ;
z-index : 10
}


code js




Copiez le code
Le code est le suivant : function readFiles(evt){ var files=evt.target.files;
if(!files){
console.log("le fichier n'est pas valide");
return;
}
for(var i=0, file; file=files[i ]; je ){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file); {
$("#showlogo ").attr("src",this.src);
}
}
}







Copiez le code


Le code est le suivant :
$(document).ready(function(){ $("#logoimg").change(function(e ){ readFiles(e) }
});
Étiquettes associées：
html5
source：php.cn
Article précédent：menu html5 origami effect_html5 compétences du didacticiel Article suivant：Exemple d'implémentation de l'effet d'ombre sur toile dans les compétences du didacticiel html5_html5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal