Sebelum memperkenalkan teks utama, izinkan saya memperkenalkan pengetahuan tentang Plupload.
Pengantar Plupload
Plupload dikembangkan oleh pengembang TinyMCE, menyediakan plug-in unggahan yang sangat tersedia untuk sistem manajemen konten Anda atau program unggahan serupa. Plupload saat ini dibagi menjadi API inti dan komponen antrian unggahan jQuery, yang memungkinkan Anda menggunakannya secara langsung atau menyesuaikannya sendiri.
Fitur Plupload
PluPload menggunakan komponen jQuery sebagai komponen antrian untuk memilih file dan mengunggah file.
PluPload menggunakan flash, silverlight, html5, roda gigi, browserplus, dan fileupload untuk mengunggah mesin teknologi.
PluPload memungkinkan kustomisasi untuk menggunakan API inti Plupload untuk memilih file dan mengunggah file.
JavaScript digunakan untuk mengaktifkan kotak dialog pemilihan file. Kotak dialog pemilihan file ini dapat diatur untuk memungkinkan pengguna memilih file terpisah atau beberapa file. Jenis file yang dipilih juga dapat dibatasi, sehingga pengguna hanya dapat memilih file yang sesuai yang ditentukan, seperti JGP; GIF.
PluPload memungkinkan penyesuaian beberapa peristiwa selama proses unggahan dan menulis metode pemrosesannya sendiri.
Unggah file yang dipilih tidak tergantung pada halaman dan formulir di mana ia berada. Setiap file diunggah secara terpisah, yang memastikan bahwa skrip sisi server dapat menangani satu file dengan lebih mudah pada titik waktu. Untuk informasi tertentu, silakan kunjungi situs web resmi Plupload: http://www.plupload.com/
Latar Belakang: Kontrol unggahan file front-end yang digunakan dalam proyek diunggah, dan semuanya damai untuk sementara waktu. "Kabar Baik" datang dari tempat kejadian, dan pelanggan ingin menggunakan sistem iPad dan ingin mengunggah gambar. Master pelanggan menampar dahinya dan harus bekerja lembur dengan R&D. Seperti yang Anda semua ketahui, unggah tergantung pada flash, sehingga tidak mungkin pada sistem iOS dan Mac. Jadi, setelah beberapa google, saya menemukan prupload. Lebih mudah untuk memulai.
Halaman HTML Code:
Tag kepala berisi file JS yang diperlukan
<type skrip = "Text/JavaScript" src = "js/jQuery-1.9.1.min.js">/skrip>
<!-Dialog Seni->
<type script = "text/javascript" src = "artdialog/artdialog.source.js? skin = blue"> </script>
<!-Plupload->
<script type = "text/javascript" src = "plupload/plupload.full.js"> </script>
Elemen halaman dalam tag tubuh
<!-Memicu kotak pop-up-> <a id = "unggah" href = "#"> Upload file </a> <div id = "unggahcontent" style = "display: none; tinggi: 300px; overflow-x: overflow-y: auto;"> <div id = "chooseFile"> <span sang lajang> lajang; id = "unggah" href = "javascript: void (0);"> pilih file </a> </div> <div id = "unggahfilequeue" style = "Border: 1px solid #a7c5e2; tinggi: 228px; lebar: 350px;"> </div> </div> <pra id = "console =" pre console "> </div> </div> <pre id =" Console = "pre console: 350px;"> </div> </div> <pra id = "console =" console = "pre" Pre ";
Kode dalam tag skrip
var globaluploader; function _plUpload () {var unggah = new plupload.uploader ({runTimes: 'html5, flash, silverlight, html4', browse_button: 'unggah', // atribut ID dari objek dom yang menjelajah file di halaman yang berdampingan: ' '/uploadaction!localupload.action' ,//receive actionflash_swf_url diunggah oleh file:' /folder/js/pluppload/moxie.swf',silverlight_xap_url: '/folder/js/plupload/moxie.xap'sap-foBilters: {{{luppload/slupoir mime_types: [// Batasi tipe file unggah {title: "file gambar", ekstensi: "jpg, gif, png"}]}, init: {postInit: function () {$ ('#unggah unggah'). Html ('');}, unggah: unggah, unggah, ke atas, file {'' '); Fungsi (Up, File) {// Seringkali sebelum mengunggah setelah mengklik tombol. $.ajax({url:"/folder/personal/personalAction!getNewFileName.action",type:"POST",async:false,data:{'upFileName' : file.name, 'globalPid' : globalPid},dataType:"json",success:function(data){//Set the parameter up.setOption('multipart_params', {upFileName: data.newfileName, upFileType: file.name.split (".") [file.name.split ("."). Panjang - 1], // suffix upfileSize: file.size, ParentId: globalpid});}, kesalahan: fungsi (xmlhttttttttttid: global); file ["+file.name+"] Gagal mengunggah ", ''); // $ ('#unggah'). Unggoadify ('batal', file.id); // Batalkan tugas unggah dengan menekan id}});}, href =" javascript: _plUpload_rempeovefile ('+i+', ') </plupload_rempeVeFile ('+i+',') </splUpload_rempoFeFile (','+i+','). File.name + '(' + plupload.FormatSize (file.size) + ') </span> <b> </b> <div> <div> </div> </div> </div> </div>'); i ++;});}, unggahprogress: function (Up, file) {// klik untuk mengunggah dan mengunggah dan mengunggahnya. Di sini Anda dapat menambahkan bilah kemajuan, menggunakan file.percentDocument.getElementById (file.id) .getElementsbyTagname ('b') [0] .innerhtml = '<span>-' + file.percent + "%</span>"; // persen $ ('#' + file.id) .find ('. '%'); // bilah kemajuan}, error: function (up, err) {// error trigger document.geteLementById ('console'). INNERHTML + = "/NERROR#" + ERR.CODE + ":" ERR.D.MESSAGE; eval ("(" + info.response + ")"); // Data yang dikembalikan oleh server, Anda dapat memodifikasi daftar file pada halaman, dll.}, unggahcomplete: function (up, file) {// semua file dipicu setelah mengunggah // pemadaman semua (semua file); PopupDialog () {artdialog ({id: 'file-upload', judul: 'file unggah', diperbaiki: true, lock: true, konten: $ ("#unggahcontent") [0], tombol: [{name: 'start unggah', fokus: true, callback: function () {globaluploader.start (); function () {$ ('#unggahfilequeue'). html (''); // hapus konten unggahan antrian globaluploader.files.splice (0, globaluploader.files.length); // hapus konten dalam unggahan queue return true;}}], tutup); function () {$ ('#unggahfilequeue'). html (''); // hapus konten unggahan antrian globaluploader.files.splice (0, globaluploader.files.length); // hapus konten dalam unggahan unggahan antrian}});} $ (function () {$ ('#unggahbtn'). klik (fungsi () {popupDialog ();}); _ plupload ();});Saya tidak akan menulis kode latar belakang. Saya menggunakan tindakan backend Struts2 untuk menerima file yang diterima dengan menggunakan file file pribadi. Ubah nama lain menjadi null. Saya belum tahu bagaimana mengatur nilai ini di kontrol.
Maka inilah efeknya
Jika Anda ingin menambahkan gaya CSS ini ke bilah kemajuan, Anda memiliki kendali
<Tipe Gaya = "Teks/CSS"> #unggahfilequeue {posisi: relatif; kiri: 0; atas: 0; perbatasan: 1px solid #a7c5e2; margin-bottom: 5px; tinggi: 228px; width: 350px; overflow-x: hidden; overflow-y: auto;}}} {unggah {evlow {evlow {evlow {evlow {evlow {evlow {evlow {evlow { */latar belakang-warna: #fff; -webkit-border-radius: 3px; border-radius: 3px; font: 11px Verdana, Jenewa, sans-serif;/* margin-top: 5px; */margin: 5px 5px 5px 5px; max-width: 350px; padding: 10px;}. mengunggah progress {latar belakang: #e5e5e5; margin-top: 10px; width: 100%;}.Efek terakhir. Apa, saya juga ingin mengunggah untuk menghapus file di garpu antrian, ok
Tambahkan ini dengan gaya
.uploadify-queue-item .cancel a {latar belakang: url ('js/unggah-cancel.png') 0 0 no-repeat; float: right; tinggi: 16px; Text-Indent: -9999px; Lebar: 16px;}Tentu saja, Anda juga perlu menambahkan kode JS yang dihapus. Ada RemoveFile (file) di API resmi di sini, tetapi tidak mudah digunakan di sini. Jadi metode lain digunakan untuk membagi (num, panjang), num dihapus dari yang pertama, dan panjangnya adalah jumlah yang dihapus.
fungsi _plUpload_removefile (removenum, fileId) {globaluploader.files.splice (removenum, 1); // hapus beberapa file $ (fileid) .fadeout ();}Efek akhir.
Di atas adalah Plupload+ArtDialog yang diperkenalkan kepada Anda oleh editor untuk mencapai file unggahan multi-platform. 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!