1。リソースをインポートします
2。JSPコード
<div> <label> <span>*</span>プロジェクト名:</label> <div> <入力タイプ= "text" value = "$ {proname}" placeholder = "" id = "name =" proname "readonly"> </div> </div> <div> <ラベル> id="fileList"></div> <div> <div id="filePicker">Select picture</div> <button id="btn-star">Start upload</button> </div> </div> </div> <div> <label><span >*</span>Project invoice upload: </label> <div> <div> <div> <div> <div id="dndArea"> <div id = "filepicker-2"> </div> <p>またはここで写真をドラッグするか、1回の300枚の写真を1回選択できます</p> </div> </div> <div style = "display:none;"> <div> <span> 0%</span> <span> </span> </div> <div> <div> <div> <div> div> div> div> div>アップロード</div> </div> </div> </div> </div> </div> </div> <div> <button onclick = "article_add( '' '、' invoicevo/save?&projectid = $ {projectid}&Invoicescan = '、' 10001 ');" type = "ボタン"> <i> </i> </button> </div> </div> </div>を保存します3。JSコード
<script type = "text/javascript"> var imagepath = null; function article_save(){alert( "親を更新すると弾丸層が自動的に閉じられます。"); window.parent.location.reload(); } /*project Invoice-add* / function article_add(title、url、w、h){if(imagepath){var index = layer.open({type:2、title:title、content:url+imagepath}); layer.full(index); } else {alert( "画像アップロードなし、最初の画像をアップロードしてください。}} $(function(){$( '。スキン - マイニマル入力')。iCheck({checkboxbox-blue '、radioclass:' iradio-blue '、ucdayearaea:'20%'} $( "#btn-star")、state = "peshind"、uploader = webuploader.create({auto:true、swf: 'lib/webuploader/0.1.5/upfoder.swf'、// SWFファイルパス//ファイルサーバーファイルの受信ボタンを選択します。 'gif、jpg、jpeg、bmp、png'、mimetypes: 'image/*'}); '</div>' <p>アップロードを待つ... </p> ' +' </div> ')、$ li.find(' img ')。 src){$ img. </span> ')}パーセンテージ){var $ li = $( '#' + file.id)、$ $ li .find( '。sr-only'); $ li.find( "。" Uploading "); file.id)。 .text( "アップロードエラー"); 'Startupload'){state '; spotupload') upload '); (function($){//初期化は、domready {var $ wrap = $( '。uploader-list-container')、// picture container $ queue = $( '<ul> </ul>')。情報$ $ statusbar.find( '。情報')、// uploct button $ upload( '。uploadbtn')、//ファイルが選択されていない( '。 = 0、//網膜の下で、この値は2つの比率= devicepixelratio ||ブラウザが画像Base64 IssupportBase64 =(function(){var data = new image(); var support = true; data.onload = data.onerror = function(){if(this.width!= 1 || | this.height!= 1){support = fals;}} data.src = height(this.height!= 1){ 「データ:画像/gif; base64、r0lgodlhaqabaiaaaaaap /// ywaaaaaaaacauwaow == ")()バージョン。 supporttransition =(function(){var s = document.createelement( 'p')。スタイル、s || 'moztransition' in || 'mstransition' in s || 'mstransition' in s || 'otransition' in s = null; return r;}) (!webuploader.uploader.support( 'flash')&& webuploader.browser.ie){//フラッシュはインストールされていますが、バージョンが低すぎます['expressinstallcallback']ブレーク 'ダウンロード' Alert(failed ') '; if(webuploader.ie){html + =' classid:d27cdb6e-ae6d-11cf-96b8-444553540000 " '<param name = "wmode" value = "透過" />' + '<param name = "wmode" value = "透過" />' + '<param name = "wmode" value = "透過" />' + '<param name = "wmode" value = "透過" />>' <param value = "/> ' +' </object> '; src = "http://www.adobe.com/style_guide/images/160x41_get_flash_player.jpg"/> </a> ') Return; 'lib/webuploader/0.1.5/uploader.swf'、chunked:false、chunksize:512 * 1024、server: 'Invoicevo/news_uploder?&projectid = $ {projectid}'、// runtimeorder: 'flash'、 'flash'、accept:{// title: 'image'、// extensions: 'gif、jpg、jpeg、bmp、png'、// mimeTypes: 'image/ *' //グローバルドラッグ機能を無効にします。 1024 * 1024 // 50 M}); JS、TXTファイルはドラッグされたときに受け入れられません。 (〜Unalowed.indexof [i] neved = return! A.Name <Name -1 //アップローダー。 = $( '<div>' + '<span> delete </span>' + '<span>右に回転</span>' + '<span>左に回転</span> </div>').appendto($ li)、$ prgress = $ li .find( 'p.progress span')、$ wrap = $ li .find( 'p.imgwrap') $(code){code 'case' case 'case " 'Invalid'){Showerror(file.statustext); src = "'+src+'"> '); $ lap.empty()。 $ "'+respone.">'); file.on( 'StatusChange'、function(cur、prev){if(prev === 'progress'){$ prgress.hide()。width(0);} {file.statustext); Showerror(cure.id] [1]} else(cur === 'progress') $ li.removeclass( 'state-' + prev)( 'state-' + cur)); }); $ btns .on( 'click'、 'span'、function(){var index = $(this)、deg; switch(index){case 0:uploader.removefile(file); return; case 1:file.rotation + = 90; break; case 2:file.rotation -= 90; + 'deg)'; $ wrap.css({'-webkit-transform': '-mos-transform':deg、 'transform':deg}); 90)4 + 4) + '); $ li.off( '。ファイルパネル')。end() :0)。 ' + webuploader.formatsize(filesize) +'} href = "#" rel = "returation nofollow" rel = "external nofollow"> regpload </a> <a href = "#" rel = "returation nofollow">無視</a> '}} else {stats = uploader.getStats(' + webuloader.formatsize + ')、statsnum +' zhang ';状態{removeclass( ' + state); uploader。 $(filepicker2」 $(filepicker2 ') (statsnum){'arerted agled'); .find( '。 $ settate(file); removefile(file); (Response.status == "error")Alert(respons.error); SetState( 'Paused')} uploader.upload(); '。 })(jQuery); </script>知らせ:
4。コントローラーコード
/** *請求書がアップロードされているページにジャンプします * @param proname * @return */@requestmapping(value = "/upload")public string invoiceupload(long id、map <string、object> map){map.put( "proname"、proname); projectservice.getProject(ID); map.put( "projectid"、id); "Project/Invoiceupload"を返します。 }/** *請求書をアップロードしてデータベースを保存 * @paramファイル * @param request * @param Response * @ResponseBody @RequestMapping(value = "/news_uploder"、method = {requestmethod.post、requestmethod.get}、produce = "application/json; MultiPartFile []ファイル、Long ProjectID、httpservletrequestリクエスト、httpservletResponse応答){string flag = null; jsonobject jsonobject = new jsonobject(); try {webuploaderutil webuploaderutil = new webuploaderutil(); webuploaderutil.upload(file [0]、 "upload/Invoice/"、request); flag = webuploaderutil.getFileName(); jsonobject.put( "filepath"、flag); jsonobject.put( "status"、 "success"); } catch(Exception e){e.printstacktrace(); } jsonobjectを返します。 } 5。ツールクラスパッケージcom.softjx.util;/** *プロジェクト名:qdlimap *ファイル名:webuploaderutil.java *パッケージ名:com.ltmap.platform.cms.util *日付:2017年4月13日6:30:45 pm *著作権(c) */インポートjava.io.file; java.text.simpledateformatをインポートします。 Import Java.util.date; javax.servlet.http.httpservletrequestをインポートします。 Import org.springframework.web.multipart.multipartfile; /** *タイトル:webuploaderutil <br/> *説明: *@company:litu hi-tech <br/> *@著者:liu yunsheng *@version:v1.0 *@bint@date:日付:2017年4月13日6:30:45 pm <br/> 「JPG、PNG、GIF、JPEG」; //ファイルフォーマットを許可プライベートlong aslowsize = 2L; //ファイルサイズのプライベート文字列ファイル名を許可します。プライベート文字列[]ファイル名; public string getallowsuffix(){return alowsuffix; } public void setallowsuffix(string arowsuffix){this.allowsuffix = alowsuffix; } public long getAllowsize(){return as luthize*1024*1024; } public void setAllowsize(long as lowsize){this.allowsize = aslowsize; } 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:dodo * @param:@return * @return: @return:string * @author:liu yunsheng * @date:2017年4月14日10:17:35 am * @throws * / private string getfilenamenew() simpledateFormat( "yyyymmdhhmmmsssss"); return fmt.format(new date()); } / ** * * @title:uploads * @description:todo * @param:@param files * @param destdir * @param * @param:@param request * @param:@param:@param: @return:boid * @author:liu yunsheng * @date:2017年4月14日uploads(multipartfile [] files、string destdir、httpservletrequest request)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(multipartfile file:files){string suffix = file.getoriginalFileName()。substring(file.getoriginalFileName()。lastIndexof( "。")+1); int length = getallowsuffix()。indexof(suffix); if(length == -1){新しい例外をスロー( "許可形式でファイルをアップロードしてください"); } if(file.getSize()> getAllowsize()){show new Exception( "アップロードしたファイルサイズは範囲外"); } string realpath = request.getSession()。getServletContext()。getRealPath( "/");ファイルdestfile = new File(RealPath+DestDir); if(!destfile.exists()){destfile.mkdir(); } string filenameNew = getFileNameNew()+" file.transferto(f); f.createNewfile(); filenames [index ++] = basepath+destdir+filenamenew; }} catch(例外e){shrow e; }} / ** * * @title:upload * @description:todo * @param:@param file * @param:@param destdir * @param:@param request * @param: @throws例外 * @return:@author:@author:liu yunsheng * @date:2017年4月14日、 @bidfows *ファイル、文字列destdir、httpservletrequest request)スロー例外{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(suffix); if(length == -1){throw new Exception( "許可形式でファイルをアップロードしてください"); } if(file.getSize()> getAllowsize()){shrow new Exception( "アップロードしたファイルサイズは範囲を超えました"); } string realpath = request.getSession()。getServletContext()。getRealPath( "/")+"/";ファイルdestfile = new File(RealPath+DestDir); if(!destfile.exists()){destfile.mkdirs(); } string filenameNew = getFileNameNew()+"。"+suffix;ファイルf = new file(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){スローe; }}}要約します
上記は、私があなたに紹介したWebuploaderです。画像バッチアップロード関数には、サンプルコードが装備されています。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!