Komponen Upload File WebUploader dapat sepenuhnya memanfaatkan keunggulan HTML5 di browser modern, sementara tidak meninggalkan browser utama IE, menggunakan runtime flash asli, dan kompatibel dengan IE6+, iOS 6+, Android 4+. Dua set waktu berjalan, metode panggilan yang sama dapat dipilih oleh pengguna sesuka hati. Penggunaan fragmentasi file yang besar mengunggah secara bersamaan sangat meningkatkan efisiensi pengunggahan file.
1. PENDAHULUAN FUNGSI
Sharding, konkurensi
Sharding dan concurrency bergabung untuk membagi file besar menjadi beberapa blok dan mengunggah secara bersamaan, sangat meningkatkan kecepatan unggahan file besar.
Saat masalah jaringan menyebabkan kesalahan transmisi, Anda hanya perlu menransmisikan kembali beling kesalahan, bukan seluruh file. Selain itu, Transmisi Shard dapat melacak kemajuan unggahan lebih banyak secara real time.
Pratinjau, kompresi
Mendukung format gambar umum JPG, JPEG, GIF, BMP, pratinjau PNG dan kompresi untuk menyimpan transmisi data jaringan.
Menganalisis informasi meta dalam JPEG, dan menangani berbagai orientasi dengan benar. Pada saat yang sama, setelah kompresi, unggah dan simpan semua data meta asli gambar.
Tambahkan file melalui beberapa saluran
Mendukung beberapa pemilihan file, ketik pemfilteran, seret dan drop (file & folder), dan fungsi pasting gambar.
Fungsi paste terutama tercermin dalam fakta bahwa ketika ada data gambar di clipboard (alat tangkapan layar seperti qq (ctrl + alt + a), klik kanan gambar di halaman web dan klik salin), Ctrl + V dapat menambahkan file gambar ini.
Html5 & flash
Kompatibel dengan browser arus utama, antarmuka yang konsisten, dan mengimplementasikan dua set dukungan runtime, sehingga pengguna tidak perlu peduli dengan kernel apa yang digunakan secara internal.
Pada saat yang sama, bagian flash tidak melakukan pekerjaan terkait UI, yang nyaman bagi pengguna yang tidak peduli dengan ekspansi Flash dan kebutuhan bisnis khusus.
MD5 detik lulus
Ketika ukuran file besar dan jumlahnya relatif besar, ia mendukung verifikasi nilai file MD5 sebelum mengunggah. Jika konsisten, Anda dapat melewatkannya secara langsung.
Jika server dan front-end memodifikasi algoritma secara seragam dan mengambil segmen MD5, itu dapat sangat meningkatkan kinerja verifikasi dan memakan waktu sekitar 20 ms.
Mudah diperluas dan dapat dilepas
Mekanisme yang dapat dilepas diadopsi untuk memisahkan fungsi menjadi widget dan dapat dicocokkan secara bebas.
Kode ini disusun menggunakan spesifikasi AMD, yang jelas dan jelas, membuatnya nyaman bagi pemain tingkat lanjut untuk berkembang.
Memperkenalkan sumber daya
Mengunggah file menggunakan pengunggah web memerlukan pengenalan tiga sumber daya: JS, CSS, dan SWF.
<!-Memperkenalkan CSS-> <tautan rel = "stylesheet" type = "text/css" href = "folder webuploader/webuploader.css"> <!-memperkenalkan js-> <script type = "text/javascript" src = "WebUploader folder/WebUploader. ditampilkan nanti->
2. Unggah file
WebUploader hanya berisi implementasi unggahan file yang mendasari dan tidak termasuk bagian UI. Karena itu, Anda dapat dengan bebas memainkan aspek interaktif. Berikut ini akan menunjukkan cara menerapkan versi sederhana.
Bagian html
Pertama, siapkan struktur DOM, termasuk tiga bagian: wadah yang menyimpan informasi file, tombol pemilihan dan tombol unggah.
<Div id = "unggah"> <!-Digunakan untuk menyimpan informasi file-> <div id = "thelist"> </div> <v> <div id = "picker"> pilih file </div> <tombol id = "ctlbtn"> Mulai unggah </tombol> </Div> </div>
Inisialisasi pengunggah web
Untuk detailnya, silakan lihat bagian komentar dalam kode.
var unggah = webuploader.create ({// swf path file swf: base_url + '/js/uploader.swf', // server penerimaan file. server: 'http://webuploader.duapp.com/server/fileupload.php', // Pilih kumpulan file. Pilih: '#picker', // Tidak ada kompresi gambar, default jika itu jpeg, itu akan mengompres dan mengunggahnya lagi sebelum mengunggah!Tunjukkan Pilihan Pengguna
Karena WebUploader tidak menangani logika UI, perlu untuk mendengarkan acara file untuk mengimplementasikannya.
// Ketika sebuah file ditambahkan ke unggah antrian.on ('filequeued', function (file) {$ list.append ('<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + ';File unggahan kemajuan
Ketika file diunggah, pengunggah web akan mengirim acara UploadProgress, yang berisi objek file dan kemajuan unggahan saat ini dari file.
// Buat bilah kemajuan untuk ditampilkan secara real time selama unggahan file. unggah.on ('unggahProgress', function (file, persentase) {var $ li = $ ('#' + file.id), $ persen = $ li.find ('. Kemajuan .progress-bar'); // hindari penciptaan berulang if (! $ persen. '</div>'). Appendto ($ li) .find ('. Progress-bar');File Sukses dan Pemrosesan Kegagalan
Jika unggahan file gagal, acara UploadError akan dikirim, dan jika file berhasil diunggah, acara UploadSuccess akan dikirim. Terlepas dari keberhasilan atau kegagalan, peristiwa unggahan Complete akan dipicu setelah file diunggah.
unggah.on ('unggahSuccess', function (file) {$ ('#'+file.id) .find ('p.state'). text ('unggah');}); unggah. 'unggahComplete', function (file) {$ ('#'+file.id) .find ('. progress'). fadeout ();});3. Unggah gambar
Dibandingkan dengan unggahan file biasa, demo ini menunjukkan: filter file, pratinjau gambar, unggahan kompresi gambar dan fungsi lainnya.
Html
Untuk mengimplementasikan demo seperti di atas, Anda pertama -tama harus menyiapkan tombol dan wadah untuk menyimpan daftar informasi file yang ditambahkan.
<!-Bagian Struktur Dom-> <div id = "pengunggah-demo"> <!-Digunakan untuk menyimpan item-> <div id = "FileList"> </div> <div id = "FilePicker"> Pilih gambar </div> </div>
Javascript
Buat instance pengunggah web
// inisialisasi pengunggah web Web unggah = webuploader.create ({// Apakah akan mengunggah secara otomatis setelah memilih file. Auto: true, // swf path swf: base_url + '/js/uploader.swf', // server resepsi. Tombol File.Dengarkan acara FileQueued dan buat pratinjau gambar melalui unggahan.makethumb.
PS: Yang Anda dapatkan di sini adalah data URL data, dan IE6 dan IE7 tidak mendukung pratinjau langsung. Pratinjau dapat diselesaikan dengan flash atau server.
// Ketika sebuah file ditambahkan, unggah.on ('filequeued', function (file) {var $ li = $ ('<div id = " + file.id +'"> ' +' <mmg> ' +' <verv> ' + file.name +' </div> ' +' </div> '), $ img = $ li.find (' iMg '</div>' + '</div>'), $ img = $ li.find ('iMg>' + '</div>'), $ img = $ li.find ('iMg>' </div> ' +' </div> '), $ img = $ li.find (' iMg; ); src);}, thumbnailwidth, thumbnailheight);});Maka sisanya adalah prompt status unggahan. Ketika proses unggahan file diunggah, unggahan berhasil, unggahan gagal, dan unggahan selesai, unggahan yang terprogrress, unggahan, pengunggahan, dan mengunggah acara komplit masing -masing sesuai dengan unggahan, unggahan, success, unggah, dan unggah yang tepat.
// Buat bilah kemajuan untuk ditampilkan secara real time selama unggahan file. unggah.on ('unggahProgress', function (file, persentase) {var $ li = $ ('#'+file.id), $ persen = $ li.find ('. Rentang kemajuan'); // hindari kreasi berulang jika (! $ persen) {$ persen = $ ('<p> <span> </span> </p> p>). $ persen.css ('lebar', persentase * 100 + '%');}); // File tersebut berhasil diunggah, tambahkan kelas yang sukses ke item, dan tandai unggahan dengan gaya. unggah.on ('unggahSucCess', function (file) {$ ('#'+file.id) .addClass ('unggah-state-done');}); // File unggahan gagal, dan kesalahan unggahan ditampilkan. unggah.on ('unggah', fungsi (file) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.error'); // hindari kreasi berulang if (! $ error.length) {$ error = $ ('<Div> </div>'). Applingto ($ Li);} {$ error = ('<v> </div>'). Applingto ($ Li); selesai, berhasil atau gagal, hapus bilah kemajuan terlebih dahulu. uploader.on ('unggahComplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Remove ();});Di atas adalah pengantar cara menggunakan plug-in unggah file pengunggah web. Saya berharap ini akan membantu untuk pembelajaran semua orang.