Pertama-tama buang alamatnya, http://fex-team.github.io/webuploader/
Ada dokumen kasus demo yang relatif lengkap. Artikel ini terutama menambahkan sejumlah besar komentar berdasarkan unggahan file dan unggahan gambar, yang pada dasarnya memastikan bahwa setiap baris kode memiliki komentar untuk membantu memahami. Ini adalah versi yang disempurnakan dari demo situs web resmi. Saya berharap ini dapat membantu semua orang lebih memahami plug-in.
Pertama, unggah file
jQuery (function () {var $ = jQuery, $ list = $ ('#thelist'), $ btn = $ ('#ctlbtn'), state = 'tertunda', unggah; // inisialisasi, Anda benar -benar dapat mengakses Webuploader.uploader unggah, webuploader. '/js/uploader.swf', // Kirim ke kode latar belakang untuk diproses dan disimpan ke server server: 'http://webuploader.duapp.com/server/fileupload.php', ucapan. pengunggah. Saat file ditambahkan ke antrian, unggah. unggah ... </p> ' +' </div> '); di bawah $ li, dan tentukan $ persen ------ Mengapa pertama-tama mencari untuk membuat $ persen = $ li.find ('. Kemajuan .progress-bar'); '/Div>'). Appendto ($ li) .find ('. Progress-Bar'); Berhasil mengunggah unggah. 'Unggah', fungsi (file) {// peristiwa yang dipicu ketika file ditambahkan, FindState, dan menambahkan teks sebagai kesalahan unggahan $ ('#'+file.id) .find ('P.State'). ) {// Hubungi $ ('#'+file.id) .find ('. Kemajuan'). Fadeout ()}); Lainnya (type === 'stopupload') {state = 'berhenti'; Ketika tombol diklik, pengunggahan dimulai sesuai dengan status atau jeda $ btn.on ('klik', function () {if (state === 'unggah') {unggah.stop ();} else {unggah.upload ();}});});Kemudian unggah gambar
jQuery(function() { // Assign jquery to a global variable var $ = jQuery, $list = $('#fileList'), // Optimize retina, under retina, this value is 2, the device pixel ratio ratio ratio = window.devicePixelRatio || 1, // Thumbnail size thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // Pengunggah Web Instanasi Pengunggah; // Inisialisasi Pengunggah Web Unggah = WebUploader.Create ({// Otomatis Unggah. 'http://webuploader.duapp.com/server/fileupload.php', // pilih tombol file. 'GIF, JPG, JPEG, BMP, Png', Mimetypes: 'Image/*'}}); // Acara ini dipicu ketika file ditambahkan unggah. Info 'div>' + file.name + '</div>' + '</div>'), $ img = $ li.find ('img'); // Callback memiliki dua parameter. Saat kesalahan dipanggil, SRC menyimpan alamat unggahan thumbnail.makethumb (file, function (error, src) {if (error) {$ img.replacewith ('<span> pratinjau </span>; return;} iMG.attr (' ThumbnailHeight); '<p> <span> </span> </p>'). Lapisan ($ li) .find ('span') ''+File.id) .addclass ('unggah-state-done'); $ (<Div> </div> '). Appendto ($ li);Di bawah ini adalah kode latar belakang Java, yang digunakan untuk mendapatkan file yang diunggah dan menulis jalur nyata dari file yang diunggah ke server
1. Pertama -tama, kita harus membuat lokasi penyimpanan untuk file yang diunggah. Lokasi umum dibagi menjadi folder sementara dan nyata. Maka kita perlu mendapatkan jalur absolut dari dua folder ini. Di servlet, kita bisa melakukan ini.
ServletContext application = this.getSerVletContext (); String tempdirectory = application.getRealpath (constant.temp_directory) + "/"; String realDirectory = application.getRealPath (constant.real_directory) + "/";
Kemudian buat pabrik file, yaitu, gudang, parameter menunjukkan seberapa besar itu untuk menyimpan flush.
Salinan kode adalah sebagai berikut: FileItemFactory factory = New DiskFileItemFactory (constant.size_threshold, file baru (tempdirectory));
SERVLETFILEUPLOAD UEDLOAD = SERVLETFILEUPLOAD baru (pabrik);
2. Atur file yang diunggah
unggah.
Daftar <FILEITEM> DAFTAR = UEDLOAD.PARSEREQUEST (permintaan); Iterator <FILEItEM> iter = list.iterator (); while (iter.hasnext ()) {fileItem item = iter.next (); //item.isformfield () digunakan untuk menentukan apakah objek saat ini adalah data bidang formulir file. Jika nilai pengembalian benar, itu berarti bahwa itu bukan bidang bentuk normal jika (item.ISFormField ()) {System.out.println ("Bidang Bentuk Normal" +item.getFieldName ()); System.out.println (item.getString ("UTF-8")); } else {//system.out.println("file Form field " + item.getFieldName ()); /** Hanya bidang Formulir File yang menulis konten dalam objek ke folder nyata*/string lastpath = item.getName (); // Dapatkan nama file lastpath = lastpath.substring (lastpath.LastIndexof ("."); String filename = uuid.randomuuid (). Tostring (). Ganti ("-", "") + lastpath; item.write (file baru (realDirectory+fileName)); Paket com.lanyou.support.servlet; import java.io.file; import java.io.ioException; import java.io.printwriter; import java.util.list; import javax.servlet.servletException; impor javax.servlet.http.httppsserv; javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import net.sf.json.jsonobject; import org.apache.commons.fileupload.fileitem; impor org.apache.apache.commons.fileupload.fileitem; impor org.apache.apache.commons.fileupload.fileitem; impor org.apache.apache.commons.fileupload.fileitem; impor org.apache.apache.commons.fileupload.fileitem; impor org.apache.apache.commons.commons.fileupoad org.apache.commons.fileupload.disk.diskfileItemFactory; import org.apache.commons.fileupload.servlet.servletfileUpload; impor org.apache.commons.logging.log; impor org.apache.commons.logging.apache org.apache.commons.logging.logfactory; impor org.apache.struts2.servletactionContext; kelas publik fileupload memperluas httpservlet {private static final long serialversionuid = 1l; private static log logger = logfactory.getLog (fileuppload.class); @Override Protected void doGet (httpservletrequest req, httpservletResponse resp) melempar servletException, ioException {dopost (req, resp); } @Override Protected void dopost (httpservletRequest req, httpservletresponse resp) melempar servletException, ioException {// unggah file dengan acara tipe 1 2apk string t = req.getParameter ("t") == null? "1": req.getParameter ("t") .trim (); String path = ""; JsonObject ob = new jsonObject (); Coba {// Tugas untuk merangkum setiap item dalam pesan permintaan ke objek diskfileItem terpisah // simpan dalam memori ketika item file yang diunggah kecil, dan simpan di disk ketika disk adalah nol ServletFileUpload servletFileUpload = new servletFileUpload (pabrik); // Atur file yang diunggah servletfileUpload.setsizeMax (1024 * 1024 * 2); // Maksimum 2M Data ServletFileUpload.setFilesizeMax (2 * 1024 * 1024); servletfileupload.setHeaderencoding ("UTF-8"); // Selesaikan masalah nama file yang kacau // selesaikan badan permintaan, dapatkan file yang diunggah, dan tulis jalur yang sebenarnya jika tidak ada pengecualian yang dilemparkan // Dapatkan daftar file sesuai dengan daftar permintaan <fileitem> FileItemSlist = servletfileupload.parserequest (Fileitem> FileItemSlist = servletfileuLoad.parserequest (Fileitem> FileItemSlist = servletfileuDoad.parserequest (Fileitem> FileItemSlist = servletfileuDoad.parserequest (FileItem); // Ambil objek file terpisah dari daftar file untuk (item FileItem: FileItemSlist) {// Pertahankan apakah file tersebut merupakan jenis formulir biasa, di mana jenis file memasukkan penilaian jika (! Item.isformField ()) {// Jika file yang diunggah lebih besar dari ukuran yang ditentukan, return if (item.getSize ()> 2 * 2 * } // System.out.println ("Ukuran file yang diunggah:"+item.getSize ()); // System.out.println ("Unggah Jenis File:"+Item.GetContentType ()); // System.out.println ("Unggah nama file:"+item.getName ()); // unggah nama file string fileName = item.getName (); String ent = ""; // Jenis Konten if (item.getContentType (). EqualSignorecase ("Image/X-png") || item.getContentType (). EqualSignorecase ("Image/png")) {ent = ".png"; } else if (item.getContentType (). EqualSignorecase ("Image/Gif")) {ent = ".gif"; } else if (item.getContentType (). EqualSignorecase ("Image/BMP")) {ent = ".bmp"; } else if (item.getContentType (). EqualSignorecase ("Image/PJPEG") || item.getContentType (). EqualSignorecase ("Image/JPEG")) {ent = ".jpg"; } // Format apa yang memperoleh file if (filename.lastIndexof (".")! = -1) {ent = filename.substring (filename.lastIndexof (".")); } filename = "ev_" + system.currentTimeMillis () + ent; // Tentukan jalur file, tergantung pada struktur folder Anda, Anda mungkin perlu melakukan perubahan jika (T.Equals ("1")) {path = "Unggah/ev/" + nama file; } else {path = "unggah/pk/" + fileName; } // Simpan file ke file server file = file baru (req.getSession (). GetserVletContext () .getRealPath (path)); if (! File.getParentFile (). Exists ()) {file.getParentFile (). mkdirs (); } item.write (file); // logger.info (path); // merusak; ob.accumulate ("url", jalur); }} resp.setContentType ("Teks/html; charset = utf-8"); resp.getWriter (). tulis (ob.tostring ()); } catch (Exception e) {E.PrintStackTrace (); } akhirnya {// respons klien // resp.setContentType ("text/html; charset = utf-8"); // resp.getwriter (). tulis (ob.tostring ()); }}}Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.