Artikel ini menjelaskan metode mengunggah beberapa file dan membatasi jumlah file dalam SWFUpload. Bagikan untuk referensi Anda, sebagai berikut:
SWFUpload adalah komponen unggahan file klien berdasarkan flash dan javascript.
file handlers.js
Lengkapi file antrian (filequeued) →
Lengkapi Pilihan File (FileDialOgComplete) → Mulai mengunggah (UploadStart) → Upload Processing (UploadProgress) → Unggah Keberhasilan (UploadSuccess) → Unggah Penyelesaian (Unggah Laporan) →
Queuecomplete
Seperti yang ditunjukkan di atas, jika fungsi panggilan balik di atas dieksekusi secara berurutan dengan file seleksi tunggal, perlu dicatat bahwa beberapa file dipilih. Filequeued dan QueUeComplete hanya akan dieksekusi sekali, saat FileDialOgComplet ... → UploadComplete akan dieksekusi sekali per file.
Setelah menyelesaikan fungsi dasar dengan mengacu pada contoh resmi, imitasi Ganji mengadopsi metode iframe.
Untuk mencapai batas jumlah pratinjau thumbnail dan jumlah gambar yang dihapus dan diunggah
Tampilkan thumbnail, buat tombol untuk menghapus thumbnail,
Thumbimages Menampilkan Divs of Thumbnails for Parent Page
SRC_S adalah alamat thumbnail yang dihasilkan
SRC_B adalah alamat gambar asli
ServerData adalah data yang dikembalikan oleh halaman pemrosesan unggahan gambar. Itu akan dikembalikan dalam format kesuksesan | alamat thumbnail | alamat asli | alamat asli
function unggahSucCess (file, serverData) {coba {var result = serverData.split ('|'); if (hasil [0]! = 'Success') {var progress = fileprogress baru (file, this.customsettings.progressTarget); progress.setError (); progress.setstatus (serverData); progress.togglecancel (false); } else {var progress = fileprogress baru (file, this.customsettings.progressTarget); progress.setComplete (); progress.setstatus ("Unggah Lengkap"); progress.togglecancel (false); var img_url_s = hasil [1]; var img_url_b = hasil [2]; addImage (img_url_s, img_url_b); }} catch (ex) {this.debug (ex); }} fungsi addImage (src_s, src_b) {var newDiv = parent.document.createelement ("div"); newDiv.style.margin = "5px"; newdiv.style.height = "60px"; newDiv.style.width = "80px"; newdiv.style.border = "1px solid #7f9db9"; newdiv.style.cssfloat = "kiri"; newdiv.style.stylefloat = "kiri"; newdiv.style.position = "relatif"; var noda = parent.document.createElement ("a"); newa.classname = "hapus"; newa.title = "hapus"; newa.href = "javascript ::"; newa.onClick = function () {deldiv (newDiv);}; var newInput_s = parent.document.createElement ("input"); newInput_s.type = "tersembunyi"; newinput_s.value = src_s; newInput_s.name = "Image_s []"; newa.appendchild (newinput_s); var newInput_b = parent.document.createElement ("input"); newinput_b.type = "tersembunyi"; newinput_b.value = src_b; newInput_b.name = "Image_B []"; newa.appendchild (newinput_b); var newiMgDiv = parent.document.createElement ("div"); var newiMg = parent.document.createElement ("img"); newiMg.style.height = "60px"; newiMg.style.width = "80px"; newiMgDiv.AppendChild (newiMG); newDiv.AppendChild (newiMgDiv); newdiv.appendchild (newa); parent.document.getElementById ("thumbimages"). AppendChild (newDiv); if (newiMg.filters) {coba {newiMg.filters.item ("dximagetransform.microsoft.alpha"). opacity = 0; } catch (e) {// Jika tidak diatur pada awalnya, browser akan melempar kesalahan. Ini akan mengaturnya jika belum diatur. newiMg.style.filter = 'progid: dximagetransform.microsoft.alpha (opacity =' + 0 + ')'; }} else {newimg.style.opacity = 0; } newiMg.onload = function () {fadein (newiMg, 0); }; newiMg.src = src_s;} fungsi fadein (elemen, opacity) {var redalicoPacityBy = 5; var rate = 30; // 15 fps if (opacity <100) {opacity += reducedopacityby; if (opacity> 100) {opacity = 100; } if (element.filters) {coba {element.filters.item ("dximagetransform.microsoft.alpha"). opacity = opacity; } catch (e) {// Jika tidak diatur pada awalnya, browser akan melempar kesalahan. Ini akan mengaturnya jika belum diatur. element.style.filter = 'progid: dximagetransform.microsoft.alpha (opacity =' + opacity + ')'; }} else {element.style.opacity = opacity / 100; }} if (opacity <100) {setTimeOut (function () {fadein (elemen, opacity);}, rate); }}Mengenai pemrosesan sisa file yang diunggah
function queuecomplete (numFileSupploaded) {this.setButTondisabled (false); var stats = this.getstats (); var status = document.geteLementById ("divstatus"); status.innerHtml = "diunggah" + stats.successful_uploads + "file, Anda juga dapat mengunggah" + parseInt (this.settings ['file_upload_limit']-stats.successful_uploads) + "file";} function deldiv (myDiv) {myDiv) {myDiv) {myDiv) {myDiv) {myDiv) {myDiv) {myDiv) {myDiv) {myDiv). // swfu lihat swfu di halaman iframe swfu = swfupload baru (pengaturan); var stats = swfu.getstats (); stats.successful_uploads--; swfu.setstats (statistik); var status = document.geteLementById ("divstatus"); status.innerhtml = "diunggah" + stats.successful_uploads + "file, juga dapat diunggah" + parseInt (swfu.settings ['file_upload_limit']-stats.successful_uploads) + "file";}Mungkin karena penggunaan iframe
SWFU dalam fungsi deldiv tidak dapat diganti dengan ini
Efek keseluruhan adalah seperti yang ditunjukkan pada gambar:
Setelah mengunggah gambar dan memodifikasi informasi lagi, Anda perlu mendapatkan berapa banyak gambar yang telah diunggah dan menggabungkannya ke dalam SWFUpload
Dapatkan jalur gambar yang diunggah dari latar belakang melalui PHP, dan berikan ke array JS melalui Smarty
var img_arr = array baru (); {if isset ($ img_arr)} {bagian nama = 'img_arr' loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = baru Array ('{$ img_arr [img_arr] .images_s}', '{$ img_arr [img_arr] .images_b}'); {/bagian} {/if}Permintaan dokumen SWFUpload untuk mendapatkan informasi berikut
flashready ()
Fungsi acara ini adalah acara internal dan tidak dapat ditulis ulang. Acara ini dipicu ketika SWFUpload dipakai dan flash yang dimuat melengkapi semua operasi inisialisasi.
Pengingat: swfupload_loaded_handler di pengaturan yang sesuai
Jadi atur swfupload_loaded_handler dalam pengaturan swfupload
swfupload_loaded_handler: dimuat,
Kemudian tentukan fungsi yang dimuat di handlers.js
fungsi dimuat () {if (img_arr.length! = 0) {for (val di img_arr) {addimageFromdb (img_arr [val] [0], img_arr [val] [1], ini); }}}Hubungi fungsi addimageFromDB untuk memodifikasi jumlah gambar yang diunggah dan menghasilkan thumbnail dari gambar yang diunggah
// Inisialisasi fungsi gambar yang diunggah addimageFromDb (src_s, src_b, swfu) {var stats = swfu.getstats (); stats.successful_uploads ++; swfu.setstats (statistik); var status = document.geteLementById ("divstatus"); status.innerHtml = "Diunggah <font color = 'green'>" + stats.successful_uploads + "</font> zhang, Anda juga dapat mengunggah <font color = 'red'>" + parseint (swfu.settings ['file_upload_limit' addImage (src_s, src_b);}Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.