Catatan singkat beberapa kode yang mengunggah H5 pagi ini dan masih ada jebakan
1. Tampilan
Karena file unggahan front-end harus dilewatkan melalui formulir formulir, dan Ajax tidak dapat digunakan. Dengan cara ini, benar -benar tidak baik untuk memasukkan input dengan file tipe pada halaman seluler. Seperti yang ditunjukkan pada gambar di bawah ini, apakah itu sangat membuat frustrasi?
Setelah menemukan solusinya, beberapa PC mengganti input ini dengan flash, menggunakan perpustakaan alat jQuery seperti mengunggah, tetapi sebagian besar browser seluler tidak mendukung flash. Jadi metode terakhir adalah menggunakan formulir formulir, cukup atur transparansi formulir dan input ke 0, sehingga mereka berada dalam div dengan konten yang disiapkan untuk ditampilkan, dan konten yang ditampilkan dapat dibuat sesuai keinginan Anda. Kodenya adalah sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, skala awal = 1.0, skala pengguna = no"> <itement> </iteme> <tyle> div {width: 100%;} .Logo iMg {title> <tyle> div {width: 100%;} .Logo iMg {title> <tyle> div {width: 100%;} .Logo IMG {title> <tyle> div {width: 100%;} .Logo IMG {title> <TERYET> DIV {width: 100%;} .LOGO IMG {title> margin: 0 auto;} .upload {position: relatif; lebar: 80px; tinggi: 18px; line-height: 18px; latar belakang: #2fc7c9; text-align: center; Warna: #fff; padding: 0px 5px; -webkit-border-radius: 2px; perbatasan-radius: 2px; margin: 0 otomatis; } .upload Form {width: 100%; Posisi: Absolute; Kiri: 0; TOP: 0; Opacity: 0; Filter: alpha (opacity = 0);} .upload input bentuk {lebar: 100%;} </tyle> </head> <body> <div> <img src = "img/1.jpg"/> </div> <p> Image unggah </p> <bentuk> <form letter> </forms </form> </div </form> </forms </form> </forms </form>Penampilannya seperti yang ditunjukkan pada gambar, sehingga ditampilkan di p-tag "unggah gambar". Mengkliknya akan memberi Anda efek memilih file
2. Kode JS
Saya menulisnya cukup sederhana, hanya menggunakan fungsi dasar unggahan H5
Kode HTML adalah sebagai berikut, tindakan adalah jalur yang harus diminta. Apa yang saya lakukan di sini adalah mengunggah dan memodifikasi avatar saat file berubah. Atribut nama tag input tidak dapat dihilangkan, ini terkait dengan antarmuka backend.
<Form id = "unggahForm" enctype = "multipart/form-data" method = "post" action = "xxxxxx"> <input type = "file" name = "imagefile" id = "imagefile" onchange = "fileDold ()"/> </form>
var imaxfileSize = 2097152; //2mwindow.fileselected = function () {var ofile = document.geteLementById ('imagefile'). File [0]; // Baca file var rfilter =/^(gambar // bmp | gambar // gif | gambar // jpeg | gambar // png | gambar // tiff) $/i; if (! rfilter.test (Ofile.type)) {waspada ("Format file harus berupa gambar"); kembali; } if (ofile.size> ImaxFileSize) {waspada ("Ukuran gambar tidak dapat melebihi 2m"); kembali; } var vfd = formdata baru (document.geteLementById ('unggah')), // buat permintaan dan data oxhr = new XmlHttpRequest (); oxhr.addeventListener ('load', function (resupload) {// SUCCESS}, false); oxhr.addeventListener ('error', function () {// gagal}, false); oxhr.addeventListener ('abort', function () {// unggah interupsi}, false); oxhr.open ('pos', actionUrl); oxhr.send (VFD);};Detail menentukan keberhasilan atau kegagalan, jadi Anda harus menganggap semuanya serius.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.