1. Sumber daya impor
2. Kode JSP
<dv> <label> <span>*</span> Nama proyek: </label> <ver> <input type = "text" value = "$ {proname}" placeholder = "" id = "" name = "proname" readOnly = "label"> </div> </Div> <v> <label> thumbnail </label> </Div> </Div> <v> <label> thumbnail </label> </Div> </Div> <v> <label> thumbnail </label> </Div> </Div> <v> <label> thumbnail </label> </Div> Div> Div> <Div> <label> thumbnail </label> </Div> Div> Div> <label> ID DIV> <label> Div> <"Div> Div> Div> Div> <label> thumbnail </label> </Div> <dv> <div id = "FilePicker"> Pilih gambar </div> <tombol id = "btn-star"> Mulai unggah </button> </div> </div> </div> <div> <label> <span>*</span> Project Invoice: </label> <v> <v> <v> <v> <v> <dv Id = "DNPLEACE =" <v> <v> <v> <v> <dv> <dv ID = " drag the photo here, you can select up to 300 photos in a single time</p> </div> </div> <div style="display:none;"> <div> <span>0%</span> <span></span> </div> <div> <div> <div> <div> id="filePicker2"></div> <div> <div> Start uploading</div> </div> </div> </div> </div> </div> </div> <div> <tombol onclick = "artikel_add ('', 'Invoicevo/save? & ProjectId = $ {ProjectId} & Invoicescan =', '10001');" type = "Tombol"> <i> </i> Simpan </button> </div> </div> </div> 3. Kode JS
<script type = "text/javascript"> var imagepath = null; function artikel_save () {alert ("Lapisan peluru akan ditutup secara otomatis saat menyegarkan orang tua."); window.parent.location.reload (); } /*Project Invoice-Add* / Function Artikel_Add (judul, url, w, h) {if (imagePath) {var index = layer.open ({type: 2, title: title, konten: url+imagePath}); layer.full (indeks); } else {alert ("Tidak ada unggahan gambar, silakan unggah gambar pertama");}} $ (function () {$ ('. Input skin-minimal'). icheck ({checkboxClass: 'icheckbox-blue', radioclass: 'iradio-blue', peningkatan: '20%'}); $ list = $ = "$", $ ", $"), $ BLUE ($ "), $ BLUE ($"), $ BLUE ($ "), $ BLUE ($"), $ BLUE ($ "), $ BLUE ($", $ ("#btn-star"), state = "tertunda", pengunggah; // Tombol File. 'GIF, JPG, JPEG, BMP, PNG', MIMETYPES: 'Image/*'}}); '</div>' + '<p> Tunggu untuk mengunggah ... </p>' + '</div>'), $ img = $ li.find ('img'); src) {if (kesalahan) {$ img.replacewith ('<span> tidak dapat mempratinjau </span>') Persentase) {var $ li = $ ('#' + file.id), $ persen = $ li .find ('. Kotak progres .sr saja'); $ Li.find (". State"). Teks ("Mengunggah"); file.id) .addclass ('unggah-state-success') .find (". State"). Teks ("Diunggah"); Kesalahan ");}); // Setelah unggahan selesai, itu berhasil atau gagal, hapus bilah kemajuan terlebih dahulu. unggah. 'Mengunggah'; $ btn.on ('klik', function () {if (state === 'unggah') {unggah. (function ($) {// Inisialisasi dimulai ketika domready {var $ wrap = $ ('. pengunggah-list-container'), // gambar container $ queue = $ ('<ul> </ul>'). AppendTo ($ wrap.find ('. Queuelist')), // Status Bar, termasuk kemajuan dan kontrol $ control $. $ info = $ statusbar.find ('. Info'), // Tombol unggah $ unggah = $ wrap.find ('. unggahbtn'), // konten sebelum file tidak dipilih. $ Placeholder = $ wrap.find ('. // Optimize retina, under retina, this value is 2 ratio = window.devicePixelRatio || 1, // Thumbnail size thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // There may be pedding, ready, uploading, confirm, done. state = 'pedding', // All files progress information, the key is file id percentages = {}, // Determine whether the Browser mendukung basis gambar64 isSupportBase64 = (function () {var data = gambar baru (); var dukungan = true; data.onload = data.onError = function () {if (this.width! = 1 || this.height! = 1) {false = false;} data.src = Data: gambar/gif; base64, r0lgodlhaqabaiaaaaaaP /// ywaaaaaqabaaaCauwaow == "; Versi. supportTransition = (function() { var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader instance uploader; if (! Webuploader.uploader.support ('flash') && webuploader.browser.ie) {// flash diinstal tetapi versinya terlalu rendah. Download (WebUploader.browser.ie) {html + = 'classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000">'> <"param =" param = "html =" 100%"style =" outline: 0 "> '>'> ' +' '' '' '' '' '' '' '' 'param =" 100%" name="wmode" value="transparent" />' + '<param name="wmode" value="transparent" />' + '<param name="wmode" value="transparent" />' + '<param name="wmode" value="transparent" />' + '<param name="wmode" value="transparent" />' + '<param name="allowscriptaccess" value="always" /> '</pesene'; src = "http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg"/</a> '); // pengunggah instantiated = webuploader.create ({pick: {id: '#filePicker-2', label: 'klik untuk memilih gambar'}, formdata: {uid: 123}, dnd: '#dndarea', paste: '#uploader', swf: 'lib/lib/webupload', 0.1. Chunksize: 512 * 1024, server: 'Invoicevo/news_uploder? & ProjectId = $ {ProjectId}', // runtimeorder: 'flash', // terima: {// title: 'gambar', // ekstensi: 'gif, jpg, jpeg, bmp, png', // the mixes: igepes: jpg, jpeg, bmp, png ', // miMetes: oMiPes,/piMEP, JPG, jpeg, bmp, png',//mimes: igry (jpg, jpeg, bmp, png ',/miMes,/mImetes: oxy (jpg, jpeg, bmp, png',/png ',/miMes (mImetes' Fungsi ini tidak akan muncul ketika gambar diseret ke dalam halaman, nyalakan gambar. Fungsi) {var ditolak = false, len = items.length, i = 0, // ubah tipe js yang tidak beralasan = 'teks/polos; aplikasi/javascript'; unggah.on ('dialogopen', function () {console.log ('here');}); // unggah.on ('filequeued', function () {// unggah. }); // Tambahkan tombol "Tambahkan file", / * unggah. id = "' + file.id +'"> ' +' <p> ' + file.name +' </p> ' +' <p> </p> ' +' <p> <span> </span> </p> ' +' </li> '), $ btns = $ (' <Div> '</span> </span' </span 'ke' span ' + ran' </span '</span' </span '<pan> Left </span> </div> '). lampiran ($ li), $ prgress = $ li .find (' p.progress span '), $ wrap = $ li .find (' p.imgwrap '), $ info = $ (' </p> '; = PAULE '; File, kesalahan, src) {var img; 'lib/webuploader/0.1.5/server/preview.php', {Method: 'post', data: src, datatype: 'json'}) .done (function (response) {if (response.result) {img = $ ('<img src = "'+respons.Result) {{{{iMg src ="+response. $ Wrape. Teks (kesalahan pratinjau "); (prever== 'antrian') {$ li.off ('mouseenter mouseleave'); 'Interrupt') {Console.log (File.Statustext); $ info.remove (); $ btns.stop (). animate ({tinggi: 30}); pengembalian. 'Transform'); hapus (file) {var $ li = $ ('#' + file.id); $ .Each (Persentase, Fungsi (K, V) {Total + = V [0]; Loaded + = V [0] * V [1];}); UpdateStatus (); = 'Diunggah dengan sukses' + stats.successnum + 'foto ke album xx,' + stats.uploadfailnum + 'unggahan foto gagal, <a href = "#" rel = "eksternal nofollow" rel = "eksternal nofollow"> pengupaian ulang </a> gambar gagal atau <a href = "#" rel = "rel = noftlow" noofal "nOflowe" noF ollow atau <a href = "#"#"rel =" ollow ollow "noofal" noofal "nOflow" nOflow "noF ollow ollow atau <a href ="#" }} else {stats = unggah. $ info.html (teks); $ queue.hide (); $ statusBar.removeclass ('Invisioning'); Break; unggahan.getstats (); $ Li. $ placeholder.addclass ('Invisible'); hapus (file); == "ERROR") ALERT (response.error);}); unggah. === 'berhenti') {unggah. $ unggah.addclass ('state-' + state); }) (jQuery); </script> Melihat:
4. Kode pengontrol
/** * Lompat ke halaman tempat faktur diunggah * @param proname * @param peta * @return */@RequestMapping (value = "/unggah") public String InvoiceUpload (string proname, Long ID, peta <String, Object> peta) {peta.put ("proname", proname); ProjectService.getProject (ID); Map.put ("ProjectId", ID); mengembalikan "Proyek/InvoiceUpload"; } /** * Upload the invoice and save the database* @param file * @param request * @param response * @return */ @ResponseBody @RequestMapping(value = "/news_uploder", method ={RequestMethod.POST,RequestMethod.GET}, produces = "application/json; charset=utf-8") public JSONObject uploader(@RequestParam File multipartFile [], Long ProjectId, permintaan httpservletRequest, respons httpservletResponse) {string flag = null; JsonObject jsonObject = new jsonObject (); coba {webuploaderutil webuploaderutil = baru webuploaderutil (); webuploaderutil.upload (file [0], "unggah/faktur/", permintaan); flag = webuploaderutil.getFileName (); jsonobject.put ("filepath", flag); jsonobject.put ("status", "Success"); } catch (Exception e) {E.PrintStackTrace (); } return jsonObject; } 5. Paket kelas alat com.softjx.util;/** *Nama proyek: qdlimap *Nama file: webuploaderutil.java *Nama Paket: com.ltmap.platform.cms.util *Tanggal: April 2017 di 6:30:45 PM *Copyright (C) 2017,578888888888888888888888888818 */ impor java.io.file; impor java.text.simpledateFormat; impor java.util.date; impor javax.servlet.http.httpservletRequest; impor org.springframework.web.multipart.multipartfile; /** *Title: WebuploaderUtil<br/> *Description: *@Company: Litu Hi-Tech<br/> *@author: Liu Yunsheng*@version: v1.0 *@since: JDK 1.8.0_40 *@Date: April 13, 2017 at 6:30:45 pm <br/> */ public class WebuploaderUtil { private String allowSuffix = "JPG, PNG, GIF, JPEG"; // Izinkan Format File Private Long Longzeze = 2L; // Izinkan File Ukuran Private String FileName; Private String [] nama file; string publik getallowuffix () {return memungkinkan; } public void setallowsuffix (string memungkinkanfix) {this.allowuffix = memungkinkanffix; } public long getallowSize () {return memungkinkan*1024*1024; } public void setallowSize (long memungkinkan) {this.allowsize = memungkinkan; } public String getFileName () {return fileName; } public void setFileName (string fileName) {this.fileName = fileName; } public string [] getFileNames () {return fileNames; } public void setFileNames (String [] FileNames) {this.fileNames = FileNames; } / ** * * @title: getFileNamenew * @description: TODO * @param: @return * @return: string * @author: liu yunsheng * @date: 14 April 2017 at 10:17:35 AM * @throws * / private getFileNeMeNew () {SimplePateFateFat; SimpleDateFormat ("yyyymmddhhmmsssss"); return fmt.format (tanggal baru ()); } / ** * * @title: unggah * @description: TODO * @param: @param File * @param: @param destdir * @param: @param permintaan * @param: @throws Exception * @return: void * @author: Liu yunsheng * @date: April 14, 2010 at 10:17 unggah (multipartFile [] file, string destdir, httpservletrequest permintaan) melempar pengecualian {string path = request.getContextPath (); String BasePath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+path; coba {filenames = string baru [file.length]; INT INDEX = 0; untuk (file multipartFile: file) {string suffix = file.getoriginalfileName (). substring (file.getoriginalFileName (). lastIndexof (".")+1); panjang int = getAlloffix (). IndexOf (akhiran); if (length == -1) {lempar pengecualian baru ("Harap unggah file dalam format yang diizinkan"); } if (file.getSize ()> getAllOWSize ()) {throw new Exception ("Ukuran file yang Anda unggah di luar jangkauan"); } String realPath = request.getSession (). GetserVletContext (). GetRealPath ("/"); File destfile = file baru (realpath+destdir); if (! destfile.exists ()) {destfile.mkdir (); } String filenamenew = getFileNamenew ()+"."+Suffix; // file f = file baru (destfile.getAbsoluteFile ()+"//"+filenamenew); file.transferto (f); f.createNewFile (); nama file [index ++] = Basepath+destdir+filenamenew; }} catch (Exception e) {throw e; } } /** * * @Title: upload * @Description: TODO * @param: @param file * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: Liu Yunsheng* @Date: April 14, 2017 at 10:16:16 am * @throws */ public void upload(MultipartFile file, string destdir, httpservletRequest permintaan) melempar pengecualian {string path = request.getContextPath (); // http: // localhost: 8088/huahang string basepath = request.getscheme ()+": //"+request.getServerame ()+":"+request.getServerport ()+path; coba {string suffix = file.getoriginalfileName (). substring (file.getoriginalFileName (). lastIndexof (".")+1); panjang int = getAlloffix (). IndexOf (akhiran); if (length == -1) {lempar pengecualian baru ("Harap unggah file dalam format yang diizinkan"); } if (file.getSize ()> getAllOWSize ()) {lempar pengecualian baru ("Ukuran file yang Anda unggah telah melampaui rentang"); } String realpath = request.getSession (). GetserVletContext (). GetRealPath ("/")+"/"; File destfile = file baru (realpath+destdir); if (! destfile.exists ()) {destfile.mkdirs (); } String filenamenew = getFilenamenew ()+"."+Suffix; File f = file baru (destfile.getAbsoluteFile ()+"/"+filenamenew); file.transferto (f); f.createNewFile (); // Sertakan jalur lengkap situs web http: // localhost: 8080/qdlimap/unggah/pengguna/20170414104142667.png // fileName = Basepath+destdir+filenamenew; // kembalikan unggahan jalur relatif/pengguna/20170414104142667.png fileName = destdir+filenamenew; } catch (Exception e) {throw e; }}}Meringkaskan
Di atas adalah webuploader yang saya perkenalkan kepada Anda. Fungsi unggahan batch gambar dilengkapi dengan kode contoh. 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!