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.
1. Tampilan Efek
Termasuk Panel Unggah File dan Daftar Unggah File
2. Pendahuluan
Singkatnya, Springmvc Mybatis Maven MySQL digunakan untuk mewujudkan fungsi unggahan multi-file, dan unduhan menggunakan bentuk aliran.
Saya akan membuka blog lain untuk memperkenalkan halaman yang terlibat.
3. Siapkan bahan
Plupload
artdialog
Ada juga file JS yang menginisialisasi plugin
Ini dapat diunduh langsung dari koneksi berbagi saya
Tautan: http://pan.baidu.com/s/1c27ctak kata sandi: btqj
Ada juga unduhan jQuery
4. Kode Meja Depan
Memperkenalkan gaya dan file js
<tautan rel = "stylesheet" href = "sumber daya/css/plupload.css" type = "text/css"> <script src = "sumber daya/js/jQuery.min.min.js"> </script> <script src = "sumber daya/unggah/plupload.full.min.js"> <script src = "sumber daya/unggah/plupload.Min.js"> <cript "> <cript"> <cript "> <cript"> <cript "> <cript"> <cript "> <cript"> <cript "> <cript"> <cript "> <crips"> src = "sumber daya/artdialog4.1.7/artdialog.source.js? skin = blue"> </script> <script src = "sumber daya/js/unggah.js"> </script>
Kode JS
_plUpload (diikat UUID, jalur unggahan file); ① Mengenai UUID yang terikat, izinkan saya memberi contoh. ID pengguna saat ini adalah UUID. Anda dapat mengaitkan ID pengguna dengan file yang Anda unggah. Jika Anda bertanya di masa mendatang, Anda dapat meminta semua file yang diunggah oleh ID pengguna sesuai dengan ID Pengguna. ② Metode ini dienkapsulasi dan dapat dilihat di unggah.js. Komentar dalam artikel saya sangat jelas, dan Anda juga dapat merujuk ke dokumen resmi.
$ (function () {3 $ ('#unggahbtn'). Klik (function () {PopupDialog ();}); _pluppload ('test', '$ {pagecontext.request.contextPath}/unggahfile');});Kode halaman, tombol, kotak pop-up
<a id = "unggahbtn" href = "#"> Upload file </a> <!-memicu kotak pop-up-> <div id = "unggahcontent" style = "display: tidak ada; tinggi: 300px; overflow-x: sang sang 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- 350px; "> </div> </div> <pra id =" console = "console: 350px;"> </div> </div> <pre id = "console =" console = 350px; "> </div> </div> <pre id =" console = "console =" pre = "pre" Pre;
5. Kode Latar Belakang
Saya tidak memiliki metode untuk merangkumnya, jadi saya bisa merangkumnya sendiri untuk melihatnya dengan jelas
/ ** * Alamat permintaan unggah file * * @param Permintaan * @param Response */ @RequestMapping ("unggahfile") unggah public void (httpservletRequest, httpservletResponse response) {multiparthtpservletRequest Multipartrequest = (multipartrtpservilePlePlequest (MultiPLoQuest (Multipartrequest = (MultipartHtPServilePlePlequest (MultiPLOQUEST (MultiPLoQuest = (MultipARTHTPSERVLING (MultipartPServletRequest; (CommonsMultipartFile) multipartrequest.getFile ("file"); // Dapatkan file string unid = uuid.randomuuid (). ToString (). Ganti ("-", "");/* file utama*/ string originalFileName = File. String.ValueOf (file.getSize ());/* Ukuran file*/ string path = null;/* path penyimpanan file*/ string punid = request.getParameter ("punid"); / * File terkait punid */// simpan file if (file! = Null) {coba {string basePath = request.getSession (). GetserVletContext (). GetRealPath ("/unggahfile"); SimpleDateFormat sdf = new SimpleDateFormat ("/yyyy/mm/dd/"); String subpath = sdf.format (tanggal baru ()); path = basepath + subpath + unid + file.separator + originalFileName; // Jika folder tidak ada, buat file folder dir = file baru (path); if (! dir.exists ()) {dir.mkdir (); } file.transferto (dir); } catch (Exception e) {E.PrintStackTrace (); }} // Konversi ukuran file Long kb = 1024; Long MB = KB * 1024; Long GB = MB * 1024; ukuran panjang = long.parselong (fliesize); if (size> = gb) {fliesize = string.format ("%. 1f gb", (float) size / gb); } lain jika (size> = mb) {float f = (float) size / mb; fliesize = string.format (f> 100? "%.0f mb": "%.1f mb", f); } lain jika (size> = kb) {float f = (float) size / kb; fliesize = string.format (f> 100? "%.0f kb": "%.1f kb", f); } else {fliesize = string.format ("%d b", size); } // Simpan informasi file ke dalam basis data fileupload fileupload = fileupload baru (); fileupload.setunid (unid); fileupload.setoriginalFileName (asliFileName); fileupload.setfliesize (fliesize); fileupload.setPath (path); fileupload.setpunid (Punid); SimpleDateFormat df = new SimpleDateFormat ("yyyy-mm-dd hh: mm: ss"); fileupload.setFlietime (df.format (tanggal baru ())); FileuploadService.insert (fileupload); }Inilah metode unduhan, yaitu menggunakan aliran file untuk diunduh sesuai dengan ID file
@RequestMapping ("DownloadFile") public void downloadfile (permintaan httpservletRequest, respons httpservletResponse) {string unid = request.getParameter ("unid"); Fileupload fileupload = fileuploadservice.selectByprimaryKey (unid); if (fileupload! = null) {coba {string filename = string baru (fileupload.getoriginalFileName (). getBytes ("gbk"), "iso-8859-1"); String path = fileupload.getPath (); response.setcharacterencoding ("UTF-8"); response.setContentType ("Application/Octet-stream"); Response.setHeader ("Disposisi Konten", "lampiran; fileName =" + nama file); response.setHeader ("panjang konten", fileupload.getfliesize ()); InputStream inputStream = new fileInputStream (file baru (path)); OutputStream os = response.getoutputStream (); byte [] b = byte baru [2048]; panjang int; while ((length = inputStream.read (b))> 0) {os.write (b, 0, panjang); } os.close (); inputStream.close (); } catch (FileNotFoundException e) {e.printstacktrace (); } catch (ioException e) {e.printstacktrace (); }}}Ada juga cara untuk menghapusnya
/ ** * Penghapusan File * * @param Permintaan * @param Response */ @ResponseBody @RequestMapping ("Delfile") Peta Publik <String, Object> Defile (httpservletRequest Request, httpservletResponse respons) {string unid = request.getParameter ("uccid"); Fileupload fileupload = fileuploadservice.selectByprimaryKey (unid); // hapus bendera boolean lokal = false; File file = file baru (fileupload.getPath ()); if (file.exists ()) {// jika path adalah file dan tidak kosong, hapus flag = file.delete (); } // hapus hasil int database = fileuploadservice.deletyprimarykey (unid); if (hasil> 0) {flag = true; } Peta <string, object> peta = hashmap baru <string, object> (); peta.put ("hasil", flag); peta mengembalikan; }Di atas adalah artdialog+plupload yang diperkenalkan kepada Anda oleh editor. 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!