1. 리소스 가져 오기
2. JSP 코드
<div> <label> <span>*</span> 프로젝트 이름 : </label> <div> <input type = "text"value = "$ {proname}"placeholder = ""id = ""name = "proname"readonly = "divonly"> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> id = "FilElist"> </div> <div> <div id = "FilePicker"> 사진 선택 </div> <버튼 id = "btn-star"> 업로드 시작 </button> </div> </div> <div> <label> <div> <div> <div> <div> <div> <div> id = "FilePicker-2"> </div> <p> 또는 여기에서 사진을 드래그하면 한 번에 최대 300 장의 사진을 선택할 수 있습니다. </p> </div> </div> <div style = "display : none;"> <div> <span> 0%</span> <span> </div> <div> <div> id = "fillepficker2"> 업로드 </div> </div> </div> </div> </div> </div> </div> <div> <버튼 onclick = "article_add ( '', 'invoicevo/save? & projectId = $ {projectID} & invoicesCan =', '10001');" 타입 = "버튼"> <i> </i> 저장 </button> </div> </div> </div> 3. JS 코드
<script type = "text/javaScript"> var imagePath = null; function article_save () {alert ( "부모를 새로 고칠 때 총알 레이어가 자동으로 닫힙니다."); Window.parent.location.reload (); } /*프로젝트 인보이스-add* / function article_add (title, url, w, h) {if (imagePath) {var index = layer.open ({type : 2, title : content : url+imagePath}); layer.full (색인); } else {alert ( "이미지 업로드 없음, 이미지 업로드를 중단하십시오. $ ( "#btn-star"), state = "pending", var uploader = webuploader.create ({auto : swf : 'lib/webuploader/0.1.5/uploader.swf', // swf 파일 path // 서버 : 'lib/webuploader/0.1.5/server/file-uploader/0.1. // 옵션을 선택하십시오. 'gif, jpg, jpeg, bmp, png', mimetypes : 'image/*'}); // 파일이 큐에 추가 될 때 ( 'filequeued', function (file) {var $ li = $ ( '<<div id +' + ' +' + '</div>' + ' +' + '<div> <img> '</div>' + '<p> 업로드를 기다립니다 ... </p>' + '</div>'), $ img = $ li.find ( 'img'); if (erry) {<src ', spanttr (<splacewith); $ ( '#' + file.id), $ % = $ li .find ( '. progress-box .sr-only'); $ li.Find ( ". State") aaddclass ( '. state "). 텍스트 ("업로드 "); 오류 ");}); // 업로드가 완료된 후 성공적이거나 실패한 후, 우선 바를 삭제합니다. 업 로더. ( 'uploadcomplete', function (file) {$ ( '#' + file.id) .find ( '. progress-box'). else} else === 'stopupload') {state = 'uploadfinish') {state = 'done'; $ btn.on ( 'click', function () {if (state === 'upload') {uploader.stop ();} else {uploader.upload ()}); (function ($) {// 초기화가 domready {var $ wrap = $ ( '. Uploader-list-container'), // 그림 컨테이너 $ queue = $ ( '<ul> </ul>'). 부록 ($ wrap.find ( '. Queuelist')), // 상태 표시 줄을 포함하여 $ wrap.fintbar = $ wrap.find.find.find.find.) $ info = $ inforest ( '. info'), // 업로드 버튼 $ upload = $ wrap.find ( '. uploadbtn'), 파일이 선택되지 않기 전의 내용 ( '. placeholder') = 0, Retina, Retina 에서이 값은 2 비율입니다. 브라우저는 이미지 Base64 ISSUPPORTBASE64 = (함수 () {var data = new image (); var support = true; data.onload = data.onerror = function (this.width! = 1 || this.Height! = 1) {support = false;}} data.src =입니다. "Data : Image/GIF; Base64, R0LGODLHAQAIAAAAAAP /// YWAAAAAQAAAACAUWAOW =="(); 버전. supportTransition = (function () {var s = document.createElement ( 'p'). style, r = 'transition's s || 'moztransition'에서 s || 'mstransition's || 's = null; return r;}), // webuploader; (! webuploader.uploader.support ( 'flash') && webuploader.browser.ie) {// 플래시가 설치되어 있지만 (flashversion) {(컨테이너) {function (State) {stload (stload.) '설치 실패'). if (webuploader.browser.ie) {html + = 'clsid = "clsid : d27cdb6e-ae6d-11cf-96b8-44453540000"'} html + = 'width = "100%"style = "ontline :'< + ' +'" " '' + ' +' '" 이름 = "wmode"value = "Transparent" /> ' +'<param name = "wmode"value = "Transparent" /> ' +'<param name = "wmode"value = "Transparent" /> ' +'<param name = "wmode"value = "transparent" /> ' +'<param name = "wmode"transparent "<param name ="henllicccess " value = "/> ' +'</object> '; src = "http://www.adobe.com/macromedia/style_guide/images/160xplayer.jpg"/> </a> '; // Instantiated Uploader = WebUploader.create ({pick : {id : '#filepicker-2', label : '사진을 클릭하려면 클릭하십시오'}, formData : {uid : 123}, '#dndarea', paste : '#uploader', swf : 'lib/webuploader/0.1.5/upeder.5/upfed : ChunkSize : 512 * 1024, 서버 : 'invoicevo/news_uploder? & projectId = $ {projectId}', // runtimeorder : 'flash', // accept : {// title : 'images', // Extensions : 'gif, jpg, jpeg, bmp, png', // mimetypes : 'image/ *'//}, // mimetypes. 기능은 이미지가 표시되면 DisableGlobaldnd : Filenumlimit : 200 * 1024 * 1024, // 200 m FileSinglesizelimit : 50 * 1024 * 1024 // 50 m}; {var denied = len = initment.length, i = 0, // js type unally; uploder.on ( 'dialogopen', function () {console.log ( 'here');}); // uploader.on ( 'filesqueued', function () {// uploader.sort (a, b) {// if (a.name <b.name) // return-1; // return 1; // return 1; // return 1; // retoy. }); / * addbutton ({id : '#filepicker2', 'ready', function () {execute execute, // execute가 추가 될 때 (fille) (파일) (파일) (파일). id = " ' + file.id +'"> ' +'<p> ' + file.name +'</p> ' +'<p> </p> ' +'<p> <p> <p> <p> <p> <p> </span> </p> ' +'</li> '), $ btns = $ ('<div> ' +'<span> delete> '< +'<</span> '</span> 왼쪽 </div> '). Appendto ($ li), $ prgress = $ li .find ('p.progress span '), $ li .find ('p.imgwrap '), $ info = $ ('<p> </p> ') = '텍스트를 다시 시도하십시오 .makethumb (파일, 함수, src) {var img; if (error) {$ wrap.text ( 'preview'); return;} if (issupportbase64) {img = $ ( '<img src = "'+src+'>'); $ wrap.empty (append); 'lib/webuploader/0.1.5/server/preview.php', {method : 'post', data : src, datatype : 'json'}) .done (function (response) {if (if (response.result) {img = $ ( '<img src = "'+response.result+'"); $ wrap. ()); $ .text (미리보기 오류 ")}}; (prev == li.off ( '마우스 엔터 마우스'); 'Console.log (file.statustext) [1] = 1; $ prgress.css ( 'display', 'block'); $ btns.stop (). 애니메이션 ({height : 30}); 업 로더 (파일); DEG, DEG}} else {FORGID : DXIMAGETRANSFORM.MICROSOFT.BASICIMAGE (~~ (File.Rotation / 90) % 4 + 4)); removefile (file) {var $ li = $ (file.id]; $ .ECH (K, V) {총 + = V [0] * v [1];}; updatestatus (); = '성공적으로 업로드' + stats.successnum + '사진에 xx 앨범,' + stats.uploadfailnum + '사진 업로드, <a href = "rel ="external nofollow "rel ="external nofollow "> repupload </a> 실패한 그림 또는 <replollow" "external nofollow" "external nof"> } else {stats = uploader.getStats (); ' + webuploader.formatsize (filesize) +'), ' + stats.successnum +'zhang '; $ info.html (val) {val ===} removeclass ( 'State-' + State); $ Queue.Hide ()는 'Elemply-intrybar'; 업로드. '#filepicker2'. removeclass (stats.successnum) { '성공적으로 업로드 됨'; Span '); $statusBar.show(); } addFile(file); setState('ready'); updateTotalProgress(); }; uploader.onFileDequeued = function(file) { fileCount--; fileSize -= file.size; if (!fileCount) { setState('pedding'); } removeFile(file); updateTotalProgress(); }; /*get 서버*/ uploader.on ( 'uploadsuccess', function (file, response) {alert (alert (response.status); if (response.status = "success") {indimepath = response.filepath; alert ( "파일 저장 경로 :" + response.filepath); 업 로더 ( 'All', function (type) {var stats; // alert (type); switch (type) {case 'uploadfinished': setstate ( '확인'); break; case 'startupload': setstate ( 'Upload'); case 'stopupload'; setstate ( 'paised'); ALERT ( 'eroor :' + code); upload.upload (); $ upload.addclass ( 'state-' + state); }) (jQuery); </스크립트> 알아채다:
4. 컨트롤러 코드
/** * 송장이 업로드되는 페이지로 점프 * @param proname * @param map * @return */@requestmapping (value = "/upload") public String invoiceUpload (문자열 proname, long id, map <string, 객체> map) {map.put ( "proname", proname); projectservice.getProject (id); map.put ( "projectId", id); "project/invoiceUpload"를 반환합니다. }/** * 송장을 업로드하고 데이터베이스를 업로드하고 데이터베이스를 저장 * @param file * @param request * @param response * @repsongebody @ReSponseBody @requestMapping (value = "/news_uploder", method = {requestMethod.post, requestMethod.get}, requestMethod.get = "Applications ="afplegetpater (jsonobestpar) MultipartFile [] 파일, Long ProjectId, httpservletRequest 요청, httpservletResponse 응답) {String flag = null; jsonobject jsonobject = new jsonobject (); try {webuploaderutil webuploaderutil = 새로운 webuploaderutil (); webuploaderutil.upload (파일 [0], "업로드/송장/", 요청); flag = webuploaderutil.getfilename (); jsonobject.put ( "FilePath", flag); jsonobject.put ( "상태", "성공"); } catch (예외 e) {e.printstacktrace (); } return JsonObject; } 5. 도구 클래스 패키지 com.softjx.util;/** *프로젝트 이름 : Qdlimap *파일 이름 : webuploaderutil.java *패키지 이름 : com.ltmap.platform.cms.util *날짜 : 2017 년 4 월 13 일 오후 *Copyright (c) 2017,[email protected]@qq.com. */ import java.io.file; import java.text.simpledateformat; import java.util.date; import javax.servlet.http.httpservletrequest; org.springframework.web.multipart.multipartfile; /** *제목 : webuploaderutil <br/> *설명 : *@Company : litu hi-tech <br/> *@저자 : liu yunsheng *@version : v1.0 *@reat : jdk 1.8.0_40 *@date : 2017 년 4 월 13 일 오후 4 월 13 일 <br/>/public class webuploaderutil {public class webuploaderutil = "jpg, png, gif, jpeg"; // 파일 형식 허용 private long anlowize = 2l; // 파일 크기 허용 개인 문자열 filename; 개인 문자열 [] 파일 이름; public String getAllOwsUffix () {return incensuffix; } public void setAllOwsUffix (String ancessUffix) {this.AllOwsUffix = alliseUffix; } public long getAllowsize () {return anlowerize*1024*1024; } public void setAllowsize (long allistize) {this.Allowsize = allistize; } 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 : 2017 년 4 월 14 일 오전 10:17:35 AM * @throws * / private string getFileNamenew (simpledateformat fmt = 새로운 simpledateformat ( "yyyymmddhhmmssss"); 반환 fmt.format (new date ()); } / ** * * @title : uploads * @description : todo * @param : @param files * @param : @param destdir * @param : @param request * @param : @throws 예외 * @return : void * @author : liu yunsheng * @date : 4 월 14, 2017 at 10:17:14 * @ths * / problow 업로드 (MultipartFile [] 파일, String Destdir, httpservletRequest 요청) 예외 {String path = request.getContextPath (); String BasePath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+path; try {filenames = new String [files.length]; int index = 0; for (multipartFile 파일 : files) {String pubix = file.getoriginalFilename (). substring (file.getoriginalFilename (). lastIndexof ( ".")+1); int length = getAllowsUffix (). indexof (접미사); if (length == -1) {새 예외 던지기 ( "허용 형식으로 파일을 업로드하십시오"); } if (file.getSize ()> getAllowsize ()) {새 예외 ( "업로드 한 파일 크기가 범위가 벗어납니다"); } string realPath = requestSession (). getServletContext (). getRealPath ( "/"); 파일 destfile = 새 파일 (realPath+destdir); if (! destfile.exists ()) {destfile.mkdir (); } string filenamenew = getFilenamenew ()+"."+접미사; // file f = 새 파일 (destFile.getAbSoluteFile ()+"//"+filenamenew); file.transferto (f); f.createnewfile (); filenames [index ++] = Basepath+destdir+filenamenew; }} catch (예외 e) {throw e; }} / ** * * @title : upload * @description : todo * @param : @param 파일 * @param : @param request * @param : @param request * @param : @throws 예외 * @return : void * @author : liu yunsheng * @date : 4 월 14, 2017 at 10:16:16:16:16:16:16:16:16 : 파일, String destdir, httpservletrequest 요청) 예외 {string path = request.getContextPath (); // http : // localhost : 8088/huahang string basepath = request.getScheme ()+": //"+request.getServerName ()+":"+request.getServerport ()+path; try {string tofix = file.getoriginalfilename (). substring (file.getoriginalfilename (). lastIndexof ( ".")+1); int length = getAllowsUffix (). indexof (접미사); if (length == -1) {새 예외 던지기 ( "허용 형식으로 파일을 업로드하십시오"); } if (file.getSize ()> getAllowsize ()) {Throw New Exception ( "업로드 한 파일 크기가 범위를 초과했습니다"); } string realPath = requestSession (). getServletContext (). getRealPath ( "/")+"/"; 파일 destfile = 새 파일 (realPath+destdir); if (! destfile.exists ()) {destfile.mkdirs (); } 문자열 filenamenew = getFilenamenew ()+"."+접미사; file f = 새 파일 (destfile.getabsolutefile ()+"/"+filenamenew); file.transferto (f); f.createnewfile (); // 웹 사이트의 전체 경로 http : // localhost : 8080/qdlimap/upload/user/20170414104142667.png // filename = basepath+destdir+filenamenew; // 상대 경로 업로드/사용자/20170414104142667.png filename = destdir+filenamenew; } catch (예외 e) {Throw e; }}}요약
위는 내가 당신에게 소개 한 webuploader입니다. 이미지 배치 업로드 기능에는 예제 코드가 장착되어 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!