Commentaire: Cet article présente principalement la mise en œuvre spécifique des fichiers locaux de lecture HTML5. Le style de structure HTML, le style CSS et le code JS sont les suivants. Les amis qui en ont besoin peuvent jeter un œil
Le style de structure HTML est le suivant:<div>
<froit> Ajouter l'image </frutch>
<formulaire
<input type = "file" multiple accepte = "image / *">
</ form>
</div>
<img src = "">
Du point de vue de style, la zone d'entrée de l'élément d'entrée ne doit pas être affichée. À l'heure actuelle, l'entrée doit être définie sur un style transparent, puis l'écraser au-dessus de l'élément bouton. Ce n'est qu'alors que vous pouvez cliquer sur le bouton pour télécharger l'image. Définir accepté sur image / *, seuls les téléchargements de fichiers d'image sont autorisés.
Le style CSS est le suivant
.addpic {
Position: relative;
marge-gauche: 100px;
Largeur: 95px;
hauteur: 30px;
}
.addlogo {
CONTEXTE: None répéter le défilement 0 0 RGBA (0, 0, 0, 0);
curseur: pointeur;
taille de police: 30px;
Opacité: 0;
Position: absolue;
à droite: 0;
en haut: 0;
Z-Index: 10;
}
Code JS
Fonction ReadFiles (evt) {
var files = evt.target.files;
if (! files) {
console.log ("Le fichier est invaild");
retour;
}
pour (var i = 0, fichier; file = files [i]; i ++) {
var imgele = new image ();
var thesrc = window.url.createObjectUrl (fichier);
imgele.src = thesrc;
imgele.onload = function () {
$ ("# showlogo"). attr ("src", this.src);
}
}
}
$ (document) .ready (function () {
$ ("# LOGOIMG"). Change (fonction (e) {
ReadFiles (E)
});
});