Komentar: Artikel ini terutama memperkenalkan implementasi spesifik HTML5 membaca file lokal. Gaya struktur HTML, gaya CSS dan kode JS adalah sebagai berikut. Teman yang membutuhkannya bisa melihatnya
Gaya struktur HTML adalah sebagai berikut:<div>
<button> Tambahkan gambar </button>
<sorm>
<input type = "file" ganda accept = "gambar/*">
</form>
</div>
<img src = "">
Dari sudut pandang gaya, kotak input elemen input tidak boleh ditampilkan. Pada saat ini, input perlu diatur ke gaya transparan dan kemudian menimpanya di atas elemen tombol. Hanya dengan demikian dapat mengklik tombol untuk mengunggah gambar. Setel diterima ke gambar/*, hanya unggahan file gambar yang diizinkan.
Gaya CSS adalah sebagai berikut
.addpic {
Posisi: kerabat;
margin-kiri: 100px;
Lebar: 95px;
Tinggi: 30px;
}
.addlogo {
Latar belakang: tidak ada gulir berulang 0 0 rgba (0, 0, 0, 0);
kursor: pointer;
font-size: 30px;
Opacity: 0;
Posisi: Absolute;
Kanan: 0;
TOP: 0;
z-index: 10;
}
Kode JS
fungsi readfiles (evt) {
var file = evt.target.files;
if (! File) {
console.log ("File adalah Invaild");
kembali;
}
untuk (var i = 0, file; file = file [i]; i ++) {
var imgele = gambar baru ();
var thesrc = window.url.createObjecturl (file);
imgele.src = thesrc;
imgele.onload = function () {
$ ("#showlogo"). attr ("src", this.src);
}
}
}
$ (dokumen) .ready (function () {
$ ("#logoimg"). ubah (fungsi (e) {
ReadFiles (E)
});
});