Kommentar: In diesem Artikel wird hauptsächlich die spezifische Implementierung von HTML5 -Lesen lokaler Dateien vorgestellt. Der HTML -Strukturstil, der CSS -Stil und der JS -Code sind wie folgt. Freunde, die es brauchen, können einen Blick darauf werfen
Der HTML -Strukturstil lautet wie folgt:<div>
<Taste> Bild addieren </button>
<form>
<Eingabe type = "Datei" multiple Accept = "Bild/*">
</form>
</div>
<img src = "">
Aus Sichtweise sollte das Eingabefeld des Eingangselements nicht angezeigt werden. Zu diesem Zeitpunkt muss die Eingabe auf einen transparenten Stil eingestellt und dann über dem Tastenelement überschreiben. Nur dann können Sie auf die Schaltfläche klicken, um das Bild hochzuladen. Setzen Sie auf Bild akzeptiert/*, nur Bilddatei -Uploads sind zulässig.
Der CSS -Stil ist wie folgt
.addpic {
Position: Relativ;
Rand-Links: 100px;
Breite: 95px;
Höhe: 30px;
}
.addlogo {
Hintergrund: Keine Wiederholung von Scroll 0 0 RGBA (0, 0, 0, 0);
Cursor: Zeiger;
Schriftgröße: 30px;
Deckkraft: 0;
Position: absolut;
Rechts: 0;
Top: 0;
Z-Index: 10;
}
JS -Code
Funktion ReadFiles (evt) {
var files = evt.target.files;
if (! Dateien) {
console.log ("Die Datei ist invaild");
zurückkehren;
}
für (var i = 0, Datei; Datei = Dateien [i]; i ++) {
var imgele = new Image ();
var thesrc = window.url.createObjecturl (Datei);
imgele.src = thesrc;
imgele.onload = function () {
$ ("#showlogo"). attr ("src", this.src);
}
}
}
$ (Dokument) .Ready (function () {
$ ("#logoimg"). Änderung (Funktion (e) {
ReadFiles (e)
});
});