Html5 mengimplementasikan fungsi unggah gambar tunggal dan ganda

Kata pengantar

Hari ini kita berbicara tentang pengunggahan gambar, tunggal atau ganda. Saat ini, ada banyak sekali plugin pengunggahan gambar utama, seperti: verupload.js Jquery, Unggah File jQuery, Uploadify, jQuery.filter, dan sebagainya. Tetapi. Kami tidak akan membicarakan plugin yang disebutkan di atas hari ini. Mari kita lihat cara menggunakan FileReader di HTML5 untuk mewujudkan pratinjau gambar tunggal dan ganda, penghapusan, pengunggahan, dan fungsi lainnya. Mari kita lihat dampaknya setelah implementasi:

Ini adalah tombol yang diklik pengguna. Kalimat terpenting kami adalah input type=file dan diberikan beberapa atribut, yang dapat memenuhi kebutuhan mengunggah banyak gambar.

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>Album Klub</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <tipe input=file diterima=gambar/* nama=ClubImagesUpload id=ClubImagesUpload class=sembunyikan multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

Area di bawah ini digunakan untuk pratinjau gambar

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm ></div> </div> </div></div>

Apa? Anda bahkan harus melihat gayanya untuk melihat apakah masih manusiawi (tersenyum masam)

Pertama mari kita analisa html di atas, kita menggunakan label untuk membungkus input dan tag img. Kita berharap dengan mengklik gambar + di rendering, akan muncul kotak dialog untuk memilih foto label label terlebih dahulu.

 $(#btnClubImg).click(function() { //TODO Sesuatu});

Mari kita lihat selanjutnya, karena kita ingin mendapatkan file yang diupload, dan file kita sebagian besar ada di input, jadi kita dapatkan tag inputnya terlebih dahulu:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//Cetak elemen saat ini});

Mari kita cetak label elemen masukan saat ini untuk melihat apa itu.

Saat kita memperluas item pertama, kita akan menemukan bahwa panjang file adalah 0.

Oke, mari kita lanjutkan analisanya, karena kita ingin bisa mendapatkan file yang sedang dipilih ketika kotak input berubah. Sederhananya, ketika sebuah file dipilih, kita bisa mendapatkan file yang sedang dipilih. Ini sama dengan mendapatkan input teks di kotak input. Jadi, setelah analisis, kita tahu bahwa kita perlu menambahkan event perubahan ke tag input:

 $(#btnClubImg).klik(fungsi() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(perubahan, fungsi () { console.log(ini);// Cetak elemen saat ini yang diubah});});

Mari kita lihat dan lihat apa yang ada di dalam elemen masukan yang diubah:

Terlihat jelas di sini bahwa kita telah memperoleh gambar yang dipilih, termasuk peristiwa modifikasi terakhir, nama gambar, ukuran dan jenis gambar (dengan jenis file, kita dapat menilai apakah pengguna saat ini memilih gambar, bukan? (menyipitkan mata tersenyum) )) Sekali lagi, ini untuk satu file. Jika ada banyak file, akan ada banyak file.

Melihat ke bawah, kita dapat melihat dari cetakan bahwa kita telah mendapatkan informasi file yang kita inginkan pada elemen files dari tag input, kita hanya perlu mendapatkannya:

 var files = ini.files; var length = files.length;

Dengan cara ini, kita bisa mendapatkan semua file dan jumlah file. Lalu muncul pertanyaan. Jika kita memilih banyak file, bagaimana jika kita menampilkannya satu per satu dan menampilkannya di halaman? Ketika Anda melihat empat kata yang ditandai di atas, apakah ada dua kata yang terlintas di benak Anda? siklus

 $.each(file, fungsi (kunci, nilai) {//TOTO Sesuatu });

Dengan mengulang-ulang file yang diperoleh di atas, kita dapat memperoleh informasi dari setiap file secara bergantian. Dengan cara ini, Anda tidak hanya dapat mengeluarkannya satu per satu, tetapi jika Anda mau, Anda juga dapat mengirimkannya ke surga ~

 var fileReader = new FileReader();//Membuat instance objek FileReader var file_ = files[key];//Dapatkan file saat ini if ​​(/^image///w+$/.test(file_.type)) {// Lakukan pencocokan reguler pada file saat ini untuk melihat apakah itu adalah gambar yang dipilih fileReader.onload = function() {//Dipanggil ketika operasi pembacaan selesai} }

Penting untuk memperluas poin pengetahuan FileReader:

FileReader terutama digunakan untuk membaca konten file ke dalam memori. Melalui serangkaian antarmuka asinkron, file lokal dapat diakses di thread utama.

Dengan menggunakan objek FileReader, aplikasi web dapat membaca konten file (atau buffer data mentah) secara asinkron yang disimpan di komputer pengguna. Anda dapat menggunakan objek File atau objek Blob untuk menentukan file atau data yang akan diproses.

Kembali ke topik, kita sudah bisa mendapatkan filenya dan mendapatkan return-nya, jadi saat ini kita hanya perlu menampilkan hasil return-nya saja.

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

Mari kita cetak this.result untuk melihat apa itu:

Tentu saja, gambar tersebut diubah menjadi format data Base64. Terakhir, kami memanggil readAsDataURL untuk membaca konten file dan merepresentasikannya sebagai string data:url.

fileReader.readAsDataURL(value);

Dengan cara ini Anda bisa mendapatkan demo upload gambar sederhana, namun belum final karena masih perlu menambahkan banyak bisnis. Misalnya: setelah mendapatkan gambar pratinjau, label saat ini akan ditempati. Jika Anda mengulang di lain waktu dan langsung menggunakan label asli, gambar sebelumnya pasti akan diganti dapat menampilkannya secara berurutan, daripada mengganti tampilan. Jadi, kita masih perlu melakukan beberapa proses:

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//Gunakan apend untuk menambahkan simpul anak di bawah elemen saat ini $(#clubInputImagePreview) .append(<img src='/Images / registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//Gunakan after untuk menambahkan simpul saudara ke simpul saudara saat ini $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - pratinjau-sm delImg' ></div>);

Lalu saat kita menambahkan gambar yang dihapus, kita juga perlu memberinya event klik untuk menghilangkan area pratinjau saat ini:

 $(#ImgRemove).klik(fungsi () { $(ini).parent().remove();});

Pada akhirnya Anda akan menemukan bahwa hasilnya tidak sesuai dengan yang kita inginkan, karena ID saat ini masih ada, sehingga langkah selanjutnya tidak dapat dilakukan. Kita hanya perlu menghapus ID elemen saat ini, lalu menambahkan elemen dengan ID yang sama, sehingga browser akan mengira ini adalah elemen baru:

 $input.removeAttr(id); var newInput ='<tipe input=file diterima=gambar/* nama=ClubImagesUpload id=ClubImagesUpload kelas=sembunyikan kelipatan=beberapa>';

Kode JS lengkap terakhir adalah sebagai berikut:

 var intP = 0; $(#btnClubImg).klik(fungsi() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(perubahan, fungsi () {// console.log(ini); var files = this.files; var length = files.length; if (intP > 8) { layer.msg('Tidak ada gambar lagi~', {}); kembali; } $.each(file, fungsi (kunci, nilai) { var fileReader = FileReader baru(); var file_ = file[kunci]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('Tidak ada gambar lagi~', {} return; intP == 0) { console.log(ini.hasil); $(#clubInputImagePreview).css(gambar latar, url( + ini.hasil + )); $(#clubInputImagePreview) .append( <img src=' /Gambar/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-pratinjau img-pratinjau-sm delImg'></div> } else { $(#clubInputImagePreview + parseInt(intP) + ).css(gambar latar belakang, url( + ini.hasil + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div>); } if (kunci == 0 && intP == 0) { $(#ImgRemove).klik(fungsi () { $(ini).parent().remove(); }); lain { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .klik(fungsi () { $(ini).parent().remove(); }); intP += parseInt(1); fileReader.readAsDataURL(value); } else { layer.msg(Kesalahan format<br/>Silahkan pilih file gambar); $input.removeAttr(id); file terima=gambar/* nama=ClubImagesUpload id=ClubImagesUpload class=sembunyikan kelipatan=kelipatan>'; $(ini).tambahkan($(masukan baru) });

Di atas adalah implementasi Html5 dari fungsi unggah gambar tunggal dan ganda yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu!