1. استيراد الموارد
2. كود JSP
<div> <blable> <span>*</span> اسم المشروع: </label> <viv> <input type = "text" value = "$ {proname}" placeholder = "" id = "" name = "proname" readonly = "readonly"> </viv> </div> <div> <viv> <div id = "filepicker"> حدد صورة </div> <button id = "btn-star"> بدء تحميل </button> </viv> </viv> </viv> <viv> <blabe> <span>*</span> تعديل فاتورة المشروع: </label> <viv> <viv> <viv> <div> <p> أو اسحب الصورة هنا ، يمكنك تحديد ما يصل إلى 300 صورة في وقت واحد </p> </div> </viv> <div style = "display: none ؛"> <viv> <span> 0 ٪ </span> <span> </span> </siv> <viv> <viv> <viv> </viv> </viv> </viv> </viv> <viv> <button onClick = "article_add ('' ، 'invoicevo/save؟ & projectId = $ {projectId} & binoicescan =' ، '10001') ؛" type = "button"> <i> </i> حفظ </button> </viv> </viv> </viv> 3. كود JS
<script type = "text/javaScript"> var imagePath = null ؛ وظيفة article_save () {Alert ("سيتم إغلاق طبقة الرصاص تلقائيًا عند تحديث الوالد.") ؛ window.parent.location.reload () ؛ } /*Project Bivoice-Add* / function article_add (title ، url ، w ، h) {if (imagePath) {var index = layer.open ({type: 2 ، title: title ، content: url+imagepath}) ؛ layer.full (index) ؛ } آخر {Alert ("لا يوجد تحميل صورة ، يرجى تحميل الصورة أولاً") ؛}} $ (function () {$ ('. $ ("#btn-star") ، state = "pending" ، uploader ؛ استلام الخادم. "GIF ، JPG ، JPEG ، BMP ، PNG" ، mimetypes: 'Image/*'}}) ؛ "</div> '<p> انتظر التحميل ... </p> +' </div> ') SRC) {error) {var $ li = $ ('#' file.id) ، $ في المئة = $ li .find ('. $ li.find (". file.id) .addClass ("التحميل-سويس". خطأ ") ؛}) ؛ // بعد اكتمال التحميل ، فهو ناجح أو فشل ، حذف شريط التقدم أولاً. uploader.on ('eploadcomplete' ، function (file) {$ ('#' + file.id) .find ('. progress-box'). fadeout () ؛ "التحميل" ؛ $ btn.on ('click' ، function () {if (state === 'uploading') {exploader.stop () ؛} {toploader.upload () ؛}}) ؛ (الدالة ($) {// تبدأ التهيئة عندما يكون domReady {var $ wrap = $ ('. uploader-list-container') ، // picture container $ queue = $ ('<ul> </ul>') $ statusbar.find ('. info') ، // button button $ upload = $ wrap.find ('. eploadbtn'). Retina ، تحت شبكية العين ، هي النسبة 2 = Window.devicepixelratio || Image Base64 issupportBase64 = (function () {var data = new image () ؛ var support = true ؛ data.onload = data.onerror = function () {if (this.width! = 1 || this.height! = 1) {support = false ؛}} data.src = "البيانات: GIF ؛ BASE64 ، R0LGODLHAQABAIAAAAAAP /// YWAAAAQABAAAWAW ==" ؛ } catch (Ex) (function () {var s = document.createElement ('p'). style ، r = 'Transition' in s || 'WebKittransition' in s || 'moztransition' in s || 'mstransition' in s || 'otransition' in s ؛ r return r ؛}) ! حالة تنزيل. '؛ "<param name =" wmode "value =" tramparent " /> ' +' <param name =" wmode "value =" tramparent " /> ' +' <param name =" wmode "value =" retrapparent " /> ' + value = "دائمًا"/> src = "http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg"/> </a>) return ؛ chunked: false ، chunksize: 512 * 1024 ، server: 'Invoicevo/news_uploder؟ & projectId = $ {projectId}' ، // تعطيل وظيفة السحب العالمية. exploader.on ('dndaccept' ، function (عناصر) {var denired = false ، len = items.length ، i = 0 ، // modify js type unlarked = 'text/plain ؛ application/javaScript' ؛ for (؛ i <len ؛ i ++) {// إذا كان ذلك في القائمة (~ unarked. }) ؛ }) ؛ $ li = $ = $ ('<li id = "' + file.id + '">' + '<p>' + file.name + '</p>' + '<p> </p>' + '<p> <span> </pan> </p>' + '</li>) "<span> تدوير إلى اليسار </span> </viv> ') .appendto ($ li) ، $ prgress = $ li .find (' p.progress span ') ، $ wrap = $ li .find (' p.imgwrap ') ، $ info = $ (' <p> </p>) الفاصل تحميل .makethumb (ملف ، دالة (خطأ ، src) {var img ؛ if (error) {$ wrap.text ('لا يمكن معاينة') ؛ return ؛} if (issupportbase64) {img = $ ('<img src = "'+src+'') "lib/webuploader/0.1.5/server/feariew.php '، {method:' post '، data: src ، datatype:' json '}) .done (function (response) {if (response.result) {img = $ (' <img src =" '+response+') $ wrap. (الظهر "Queued") "المقاطعة) {console.log (statustex $ info.remove () ؛ $ btns.stop (). expload. "التحويل": deg}} {$ wrap. remostfile (file) {var $ li = $ (#' + file.id) ؛ $. updateStatus () {text = "تم تحميله بنجاح" + stats.successnum + 'إلى ألبوم xx ،' + stats.uploadfailnum + 'فشل تحميل الصور ، <a href = "#" rel = "external nofollow" rel = "external nofollow"> repload </a> <a href = " > تم تجاهله </a> '}} آخر {stats = uploader.getStats () ؛ "Zhang '} $ info.html $ placehold. $ Queue.Show () $ TOMPLOT.TEST العائد ؛ $ li ($ ' +filed) ، $ في المئة = $ li == 1) } removeFile (ملف) ؛ (Response.Status == "خطأ") تنبيه (استجابة.) ؛ setState ("توقف مؤقتًا) ؛ exploader.upload () ؛ '. }) (jQuery) ؛ </script> يلاحظ:
4. رمز وحدة التحكم
/** * القفز إلى الصفحة التي يتم فيها تحميل الفاتورة * param proname * param map * regurn */ @requestmapping (value = "/expload") public string invoiceupload (string pronse ، id long ، map <string ، object> map) {map.put ("braname" ، braname) ؛ ProjectService.getProject (id) ؛ map.put ("projectId" ، id) ؛ إرجاع "Project/BevoiceUpload" ؛ }/** * قم بتحميل الفاتورة وحفظ قاعدة البيانات * param file * request request * param respons multipartfile [] file ، projectId طويل ، طلب httpservletrequest ، httpservletresponse استجابة) {string flag = null ؛ jsonobject jsonobject = new JsonObject () ؛ جرب {webuploaderutil webuploaderUtil = جديد webuploaderutil () ؛ webuploaderutil.upload (ملف [0] ، "تحميل/فاتورة/" ، طلب) ؛ flag = webuploaderutil.getFilename () ؛ jsonobject.put ("filepath" ، flag) ؛ jsonobject.put ("الحالة" ، "النجاح") ؛ } catch (استثناء e) {E.PrintStackTrace () ؛ } إرجاع jsonobject ؛ } 5. حزمة فئة الأدوات com.softjx.util ؛/** *اسم المشروع: qdlimap *اسم الملف: webuploaderutil.java *اسم الحزمة: com.ltmap.platform.cms.util *التاريخ: 13 أبريل 2017 في 6:30:45 مساءً */ استيراد java.io.file ؛ استيراد java.text.simpledateformat ؛ استيراد java.util.date ؛ استيراد javax.servlet.http.httpservletrequest ؛ استيراد org.springframework.web.multipart.multipartfile ؛ /** *العنوان: webuploaderutil <br/> *الوصف: *@الشركة: Litu Hi-Tech <br/> *@المؤلف: liu yunsheng *@الإصدار: v1.0 *@منذ: jdk 1.8.0_40 *@التاريخ: "JPG ، PNG ، GIF ، JPEG" ؛ // السماح لتنسيق الملف الخاص يسمح طويلًا = 2L ؛ // السماح لاسم السلسلة الخاصة بحجم الملف ؛ سلسلة خاصة [] أسماء الملفات ؛ السلسلة العامة getLoSuffuffix () {return lethuffix ؛ } public void setloywowsuffix (stringfuffix) {this.allowsuffix = letchaffix ؛ } public long getallowsize () {return يسمح*1024*1024 ؛ } public void setallowsize (long thereize) {this.wlowsize = electize ؛ } السلسلة العامة getFilename () {return filename ؛ } public void setFilename (اسم ملف السلسلة) {this.filename = filename ؛ } السلسلة العامة [] getFilenames () {return fildenames ؛ } public void setFilenames (string [] fildenames) {this.filenames = fileNames ؛ } / ** * * * title: getFilenamEnew * description: todo * param: regurn * return: string * author: liu yunsheng * @date: ١٤ أبريل ، 2017 في 10:17:35 am * throos * / string private getfilenew () SimpleDateFormat ("YyyyMMDDHHMMSSSSS") ؛ إرجاع fmt.format (تاريخ جديد ()) ؛ } / ** * * * title: تحميل * description: toDo * param: param files * param: param destdir * param: param request * @param: استثناء * aturn * return: multipts ( @ @ @liU ملفات ، string destdir ، httpservletrequest) يلقي استثناء {string path = request.getContextPath () ؛ String BasePath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerPort ()+path ؛ حاول {filenames = new string [files.length] ؛ int index = 0 ؛ لـ (ملف multipartfile: الملفات) {string factix = file.getoriginalfilename (). substring (file.getoriginalfilename (). lastIndexof (".")+1) ؛ int int = getLowsuffix (). indexof (لاحقة) ؛ if (length == -1) {رمي استثناء جديد ("يرجى تحميل الملف بالتنسيق المسموح به") ؛ } if (file.getSize ()> getLlowsize ()) {رمي استثناء جديد ("حجم الملف الذي تم تحميله خارج النطاق") ؛ } string RealPath = request.getSession (). getServletContext (). getRealPath ("/") ؛ ملف destfile = ملف جديد (RealPath+DestDir) ؛ if (! destfile.exists ()) {destfile.mkdir () ؛ } String fileNamEnew = getFilenamEnew ()+". file.transferto (f) ؛ f.createNewFile () ؛ أسماء الملفات [index ++] = basepath+destdir+fileNamEnew ؛ }} catch (استثناء e) {throw e ؛ } ستر string destdir ، httpservletrequest طلب) يلقي استثناء {string path = request.getContextPath () ؛ // http: // localhost: 8088/huahang string basepath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerPort ()+path ؛ حاول {string factix = file.getoriginalfilename (). substring (file.getoriginalfilename (). lastIndexof (".")+1) ؛ int int = getLowsuffix (). indexof (لاحقة) ؛ if (length == -1) {رمي استثناء جديد ("يرجى تحميل الملفات بالتنسيق المسموح به") ؛ } if (file.getSize ()> getLoSlowSize ()) {رمي استثناء جديد ("لقد تجاوز حجم الملف الذي تم تحميله النطاق") ؛ } string RealPath = request.getSession (). getServletContext (). getRealPath ("/")+"/" ؛ ملف destfile = ملف جديد (RealPath+DestDir) ؛ if (! destfile.exists ()) {destfile.mkdirs () ؛ } سلسلة fileNamEnew = getFilenamEnew ()+"."+لاحقة ؛ ملف f = ملف جديد (destfile.getabsolutefile ()+"/"+fileNamEnew) ؛ file.transferto (f) ؛ f.createNewFile () ؛ // قم بتضمين المسار الكامل لموقع الويب http: // localhost: 8080/qdlimap/upload/user/20170414104142667.png // fileName = basepath+destdir+filenamenew ؛ // إرجاع تحميل المسار النسبي/المستخدم/20170414104142667.PNG اسم الملف = DestDir+FileNamEnew ؛ } catch (استثناء e) {throw e ؛ }}}لخص
ما سبق هو webuploader الذي قدمته لك. تم تجهيز وظيفة تحميل مجموعة الصور برمز مثال. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!