1. Импорт ресурсов
2. код JSP
<div> <backel> <pan>*</span> Имя проекта: </label> <div> <input type = "text" value = "$ {neame}" Placeholder = "" id = "" name = "neame" readonly = "readonly"> </div> </div> <div> <sabel> id = "filelist"> </div> <div> <div id = "filepicker"> выберите изображение </div> <button id = "btn-star"> запуск загрузки </button> </div> </div> </div> <div> <sabel> <pan>*</span> induice indoice: </label> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> id="filePicker-2"></div> <p>Or 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 Загрузка </div> </div> </div> </div> </div> </div> </div> <div> <button Onclick = "article_add ('', 'infoicevo/save? & projectId = $ {projectId} & invoicescan =', '10001');" type = "button"> <i> </i> save </button> </div> </div> </div> 3. JS -код
<script type = "text/javascript"> var imagepath = null; function article_save () {alert («слой пули будет автоматически закрыт при обновлении родителя.»); window.parent.location.reload (); } /*Project INSOICE-ADD* / function article_add (заголовок, url, w, h) {if (imagepath) {var index = layer.open ({type: 2, title: title, content: url+imagepath}); Layer.full (index); } else {alert ("Нет загрузки изображения, пожалуйста, загрузите изображение первым");}} $ (function () {$ ('.. Minimal Input'). ICHECK ({CHACEBOXCLASS: 'ICHECKBOX-BLUE', RADIOCLASS: 'Iradio Blue', увеличивание: '20%'}); $ ("#btn-star"), state = "warding", uploader; // Выберите кнопку «Файл». 'GIF, JPG, JPEG, BMP, PNG', MIMETYPES: 'Image/*'}}); '</div>' + '<p> ждать загрузки ... </p>' + '</div>'), $ img = $ li.find ('img'); src) {if (erron) {$ img.replacewith ('<pan> не может быть предварительно просмотреть </span>'); {var $ li = $ ('#' + file.id), $ процент = $ li .find ('. $ li.find (". State"). file.id) .AdDClass ('upload-State-Success') .find (". State"). Ошибка ");}); // После завершения загрузки, она успешна или не удастся, удалите строку первого строки. «Загрузка»; $ btn.on ('click', function () {if (state === 'uploading') {uploader.stop ();} else {uploader.upload ();}}); (function ($) {// Инициализация начинается, когда Domready {var $ wry = $ ('. $ info = $ statusbar.find ('. info'), // кнопка загрузки $ upload = $ wrap.find ('. // Оптимизируйте сетчатку, в соответствии с сетчатой, это значение составляет 2 COTRIO = Window.DevicePixelRatio || 1, // Размер ThumbNail Браузер поддерживает изображение 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 = «Данные: Image/GIF; Base64, R0LGODLHAQABAAAAAAAAP /// YWAAAAAQABAAACAUWAOW ==»; } catch (ex) {try {version = new ActivexObject ('Shockwaveflash.shockwaveflash') .getvariable ('$ version'); (function () {var s = document.createElement ('p'). Style, r = 'transition' in s || 'webkittransition' в s || 'moztransition' в s || 'mStransition' в s || 'otransition' in s; s = null; return r;}) (), // webploader advence uptroder; (! Webupoader.uploader.support ('flash') && webuploader.browser.ie) {// Flash установлена, но версия слишком низкая. Скачать. '; if (webuploader.browser.ie) {html + =' classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000"; '<param name = "wmode" value = "прозрачный" />' + '<param name = "wmode" value = "прозрачный" />' + '<param name = "wmode" value = "transparent" />' + '<param name = "wmode" value = "tranparent" />' + '<param name = "wmode" value = "transparent" />' + '<<<<<<<<<<<8 name = "wmode" = " />' +" <<<<<<<<<<<<8 name = "wmode" = " /> ' +" << + name = "wmode" = " />' + '< +' <<<<<<<<<<<3 name =" Value = "Always"/> ' +' </Object> '; SRC = http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg "/> </a> '); // indathied uploader = webuploader.create ({pick: {id: '#filepicker-2', метка: 'Нажмите, чтобы выбрать Picture'}, formData: {uid: 123}, DND: '#dndarea', вставка: '#Uploader', swf: 'falseLoader/upload. Chunksize: 512 * 1024, сервер: 'infoicevo/news_uploder? & projectid = $ {projectid}', // Runtimeorder: 'Flash', // Принять: {// Название: 'Изображения', // расширения: 'GIF, JPG, JPEG, BMP, PNG', // MIMETYPES: 'Image/ * Функция. Function (eptions) {var dend = false, letress. uploader.on ('dialogopen', function () {console.log ('здесь');}); }); $ ('<li id = "' + file.id + '">' + '<p>' + file.name + '</p>' + '<p> </p>' + '<p> <pan> </span> </p>' + '</li>'), $ btns = $ ('<div>' + '<pan> delete </span>' + '<pran> rottat '<span>Rotate to the left</span></div>') .appendTo($li), $prgress = $li .find('p.progress span'), $wrap = $li .find('p.imgWrap'), $info = $('<p></p>'), showError = function(code) { switch (code) { case 'exceed_size': text = 'File size exceeds'; Break; uploader .makethumb (file, function (erry, src) {var img; if (error) {$ wry.text ('не может быть предварительно просмотр'); return;} if (issupportbase64) {img = $ ('<img src = "+src+'"> '); 'lib/webuploader/0.1.5/server/preview.php', {method: 'post', data: src, datatype: 'json'}) .done (function (response) {if (response.result) {img = $ ('<img src = "'+response.result+'">'); $ wrom. (prev === 'queed') {$ li.oft ('MouseEnter MouseLeave'); === 'Enterrupt') {console.log (file.statustext); «Прогресс» {$ info.remove (); $ btns.stop (). Animate ({height: 30}); uploader.removefile (file); 'Transform': Deg}); removeFile (file) {var $ li = $ ('#' + file.id); $. UpdateStatus (); = 'Загружено успешно' + stats.successnum + 'photo to xx альбом,' + stats.uploadfailnum + 'photo ulload Не удалась, <a href = "#" rel = "enfullow" rel = "внешний nofollow"> повторная загрузка </a> неудачная картина или <a href = "#" rel = "nofollow" relload </a> noflol noflol noflol noflol noflol noflol'> 'rely noflol {stats = uploader.getstats (); $ info.html (текст); queue.hide (); $ uptainsbar «Подтвердите». uploader.getstats (); = $ li. $ walkhore.Dclass ('invitiable'); Remoadfile (File); (response.status == «Ошибка») Alert (response.error); Break; else if (state === 'pause') {uploader.upload (); Alert ('todo'); }) (jQuery); </script> Уведомление:
4. Код контроллера
/** * Прыжок на страницу, где загружается счетная запись * @param rename * @param map * @return */@requestmapping (value = "/upload") public String infoiceUpload (строка naame, long id, map <string, object> map) {map.put ("ineame", vename); Projectservice.getProject (id); map.put ("projectId", id); вернуть "Project/incoiceUpload"; }/** * Загрузите счет и сохранение базы данных * @param file * @param request * @param response * @return */@responsebody @requestmapping (value = "/news_uploder", method = {requestmethod.post, requestMethod.get grates = "application/json; MultiplaartFile [] файл, Long ProjectId, httpservletRequest запрос, httpservletresponse response) {string flag = null; JsonObject jsonObject = new jsonObject (); try {webuploaderutil webuploaderutil = new webuploaderutil (); webuploaderutil.upload (file [0], "upload/infuice/", request); flag = webuploaderutil.getfilename (); jsonobject.put ("filepath", flag); jsonObject.put («Статус», «Успех»); } catch (Exception e) {e.printstackTrace (); } return jsonObject; } 5. Пакет класса инструментов com.softjx.util;/** *Имя проекта: qdlimap *Имя файла: webuploaderutil.java *Имя пакета: com.ltmap.platform.cms.util *Дата: 13 апреля 2017 года в 18:30:45 *Copyright (c) 2017 [email protected]. */ import java.io.file; импортировать java.text.simpledateformat; импортировать java.util.date; Импорт javax.servlet.http.httpservletrequest; Импорт org.springframework.web.multipart.multipartfile; /** *Название: webuploaderutil <br/> *Описание: *@Company: litu Hi-Tech <br/> *@Автор: Liu Yunsheng *@версия: v1.0 *@С момента: JDK 1.8.0_40 *@Дата: 13 апреля 2017 г. в 6:30:45 <br/>/public class webU "jpg, png, gif, jpeg"; // разрешение формата файла private long разрешает = 2l; // разрешить размер файла частного имени строки; частная строка [] имена файлов; public String getAllowsuffix () {return Alsuffix; } public void setAllowSuffix (String Alsuffix) {this.allowsuffix = Alsuffix; } public long getallowSize () {return позволяет*1024*1024; } public void setAllowSize (long Alsize) {this.allowsize = Alsize; } 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 апреля 2017 в 10:17:35 * @Throws * / private string getFilENAMENE SimpleDateFormat ("yyyymmddhhmmsssss"); return fmt.format (new Date ()); } / ** * * * @title: uploads * @description: todo * @param: @param files * @param: @param destdir * @param: @param запрос * @param: @throws exception * @return: void * @author: liu yunsheng * @date: 14 апреля 2017 года в 10:17:14: @throw uploads (multiplaartfile [] файлы, String destdir, httpservletrequest) Throws Exception {String path = request.getContextPath (); String basePath = request.getScheme ()+": //"+request.getServername ()+":"+request.getServerport ()+path; try {filenames = new String [files.length]; int index = 0; for (multiplatfile file: files) {string suffix = file.getoriginalfilename (). substring (file.getoriginalfilename (). int length = getallowsuffix (). Indexof (суффикс); if (length == -1) {бросить новое исключение («Пожалуйста, загрузите файл в допустимый формат»); } if (file.getSize ()> getAllowsize ()) {бросить новое исключение («Размер файла, который вы загружены, не в диапазоне»); } String realPath = request.getSession (). GetServletContext (). GetRealPath ("/"); File destfile = новый файл (realPath+destdir); if (! destfile.exists ()) {destfile.mkdir (); } String filenAmenew = getFilEnamEnew ()+"."+Суффикс; // файл f = new File (destfile.getAbsolutefile ()+"//"+filenamenew); file.transferto (f); f. createnewfile (); Имена файлов [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) Throws Exception {String path = request.getContextPath (); // http: // localhost: 8088/huahang string basepath = request.getscheme ()+": //"+request.getservername ()+":"+request.getserverport ()+path; try {string suffix = file.getoriginalfilename (). substring (file.getoriginalfilename (). LastinDexof (".")+1); int length = getallowsuffix (). Indexof (суффикс); if (length == -1) {бросить новое исключение («Пожалуйста, загрузите файлы в допустимый формат»); } if (file.getSize ()> getAllowsize ()) {бросить новое исключение («Размер файла, который вы загрузили, превысил диапазон»); } String realPath = request.getSession (). GetServletContext (). GetRealPath ("/")+"/"; File destfile = новый файл (realPath+destdir); if (! destfile.exists ()) {destfile.mkdirs (); } String filenAmenew = getFilenAmenew ()+"."+Суффикс; File f = new File (destfile.getabsolutefile ()+"/"+filenamenew); file.transferto (f); f. createnewfile (); // Включите полный путь веб -сайта http: // localhost: 8080/qdlimap/upload/user/20170414104142667.png // filename = basePath+destdir+fileNamenew; // возвращать относительный путь upload/user/20170414104142667.png filename = destdir+fileNamenew; } catch (Exception e) {throw e; }}}Суммировать
Приведенное выше - WebUploader, который я познакомил вам. Функция загрузки партии изображения оснащена примером кода. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!