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

Le style de structure html est le suivant :

Copier le code

Le code est le suivant :

Ajouter une image

"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) }

});