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のウェブサイトへのご支援ありがとうございます！