Gunakan ciri baharu HTML5 untuk mencapai muat naik tak segerak bagi fail imej_html5 kemahiran tutorial

Adalah sangat mudah dan mudah untuk menggunakan ciri baharu HTML5 untuk memuat naik fail secara tidak segerak Artikel ini menunjukkan bahagian JS dan struktur html. Kod di bawah tidak menggunakan pustaka pihak ketiga Jika terdapat rujukan, sila beri perhatian kepada beberapa coretan kod yang tidak ditunjukkan. Pratonton kesan di sebelah saya:

1 Fail tidak dipilih 2. Fail dipilih


Bahagian kod HTML:
Idea: Dalam kod di bawah, saya menggunakan atribut z-index css untuk menyembunyikan teg input="file” di bawah elemen id=btnSelect. Selepas mencetuskan klik pada teg a, kotak pemilihan fail muncul. masklayer di bawah digunakan untuk mengklik butang sahkan Lapisan timbul untuk menghalang pengguna daripada berulang kali mengklik butang pengesahan:

Klik untuk memilih foto untuk dimuat naik< /a> />

Sahkan muat naik

-layer" style="max-width:90%">

Gambar sedang dimuat naik. ..

Bahagian pengesahan fail imej JS:

Bahagian pengesahan ialah: saiz, sama ada ia telah dipilih, fail Jenis mempunyai tiga bahagian Kaedah createObject pertama adalah untuk mencipta laluan pratonton fail imej setempat , dan sahkan sama ada ia kosong, jenis fail dan saiz fail Jika syarat tidak dipenuhi,

false akan dikembalikan Jika tiga syarat di atas dipenuhi, Selepas syarat, hasilkan pratonton imej dalam dom, tambah elemen img, dan kemudian gunakan kaedah createObjectURL() untuk mendapatkan laluan pratonton:








Salin kod

Kod adalah seperti berikut:


//Dapatkan alamat URL data
fungsi createObjectURL(blob) {
if (window.URL) {
return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {

return window.webkitURL.createObjectURL(blob); {

kembali null;
}

}

//Pengesanan failfungsi semakFail() { //Dapatkan failvar file = $$( "uploadFile") .files[0]; //Hakim jika fail kosong

jika (fail === null || fail === tidak ditentukan) {

alert("Sila pilih fail yang ingin anda muat naik dokumen! ");

$$("btnSelect").innerHTML = "Klik untuk memilih foto untuk dimuat naik";

kembali palsu;
}
//Kesan jenis fail
jika(fail .type.indexOf('image') === -1) {
alert("Sila pilih fail imej!");
kembali palsu; 🎜 >saiz var = Math.floor(file.size/1024);
};
//Tambah imej pratonton
$$("btnSelect").innerHTML = "";
};



Bahagian permintaan JS Ajax:

Penerangan: Pendengar pertama adalah untuk acara perubahan pemilihan fail Selepas syarat pengesahan dipenuhi, pratonton adalah Dilaksanakan. Pendengar acara kedua ialah Dengar respons tetingkap timbul apabila btnSelect diklik Berikut ialah pemantauan acara butang muat naik pengesahan untuk mula menghantar permintaan Ajax di sini adalah untuk mencipta Objek XMLHttpRequest. Saya belum menyiarkan kod, termasuk kaedah addEventListener() , 2 bahagian ini boleh merujuk kepada artikel lain >Kodnya seperti berikut:

Salin kod
//Dengar untuk perubahan alamat URL imej
addEventListener($$("uploadFile"), "change", function() {
checkFile();
} );
//Dengar untuk klik butang pemilihan fail
addEventListener($$("btnSelect"), "klik", function() {
//Pasang kotak pilihan fail
$$(" uploadFile").klik();
});
//Dengar acara klik butang muat naik pengesahan
addEventListener($$("btnConfirm"), "klik", function(e) {
if (checkFile()) {
cuba {
//Lakukan operasi muat naik var xhr = createXHR();
$$("maskLayer").style.display = "block";
xhr.open("post","/uploadPhoto.action", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); .onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (bendera == "berjaya") {
alert("Imej berjaya dimuat naik!");
} lain {
alert("Imej berjaya dimuat naik!");
};
$$("maskLayer").style.display = "tiada";
};
} ;
//Data borang
var fd = new FormData();fd.append("myPhoto", $$("uploadFile").files[0] );
//Lakukan Hantar
xhr.send(fd); );



Di atas adalah semua bahagian kod utama Jika anda mempunyai sebarang pertanyaan, sila hubungi saya dan dialu-alukan untuk berkomunikasi.