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->
Unggahan 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.
Silakan klik tombol Pilih File di bawah ini, dan kemudian klik Mulai Unggah untuk mengalami demo ini.
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.
uploader.on ('unggahSucCess', function (file) {$ ('#'+file.id) .find ('p.state'). text ('diunggah');}); uploader.on ('unggah', fungsi (file) {$ ('#'+file.id) .find ('p.state'). Text ('Upload error');}); uploader.on ('unggahComplete', function (file) {$ ('#'+file.id) .find ('. progress'). fadeout ();}); uploader.on ('unggahComplete', function (file) {$ ('#'+file.id) .find ('. progress'). fadeout ();});Unggahan 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 var unggah = webuploader.create ({// apakah akan mengunggah secara otomatis setelah memilih file.auto: true, // swf path file 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>'). .find ('span');} $ persen.css ('lebar', persentase * 100 + '%'); // File ini berhasil diunggah, tambahkan kelas yang sukses ke item, dan tandai unggahan dengan gaya. uploader.on ('unggahSucCess', function (file) {$ ('#'+file.id) .addclass ('unggah-state-done');}); // File Unggah gagal, dan kesalahan unggahan ditampilkan. uploader.on ('unggah', fungsi (file) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.error'); // hindari kreasi berulang if (! $ error.length) {$ error = $ ('<v> </div>'). Applingto ($ li); // Setelah unggahan selesai, berhasil atau gagal, hapus bilah kemajuan terlebih dahulu. uploader.on ('unggahComplete', function (file) {$ ('#'+file.id) .find ('. Progress'). Remove ();});Di atas adalah pengetahuan yang relevan yang diperkenalkan kepada Anda dengan menggunakan pengunggah web untuk mencapai pengunggahan multi-file. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!