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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal