Pluploadの紹介
Pluploadは、Tinymceの開発者によって開発されており、コンテンツ管理システムまたは同様のアップロードプログラムで非常に利用可能なアップロードプラグインを提供します。 Pluploadは現在、コアAPIとjQueryアップロードキューコンポーネントに分割されています。これにより、直接使用するか、自分でカスタマイズできます。
1。エフェクトディスプレイ
ファイルアップロードパネルとファイルアップロードリストを含む
2。はじめに
短くするために、Spring SpringMVC MyBatis Maven MySQLを使用してマルチファイルアップロード機能を実現し、ダウンロードはストリームの形式を使用します。
別のブログを開いて、関係するページを紹介します。
3。材料を準備します
plupload
artdialog
プラグインを初期化するJSファイルもあります
これらは、私の共有接続から直接ダウンロードできます
リンク：http：//pan.baidu.com/s/1c27ctakパスワード：btqj
jqueryのダウンロードもあります
4。フロントデスクコード
スタイルとJSファイルを紹介します
<link rel = "styleSheet" href = "resources/css/plupload.css" type = "text/css"> <script src = "resources/js/jquery.min.js"> </scrip> <scrip src = "resources/upload/plupload.full.ful.min.min.js"> </script> < src = "resources/artdialog4.1.7/artdialog.source.js？skin = blue"> </script> <script src = "resources/js/upload.js"> </script>
JSコード
_plupload（バインドuuid、ファイルアップロードパス）; boundバウンドUUIDについては、例を挙げてみましょう。現在のユーザーのIDはUUIDです。ユーザーIDをアップロードするファイルに関連付けることができます。将来照会する場合、ユーザーIDに従ってユーザーIDによってアップロードされたすべてのファイルをクエリすることができます。 ②この方法はカプセル化されており、upload.jsで見ることができます。私の記事のコメントは非常に明確であり、公式文書を参照することもできます。
$（function（）{3 $（ '＃uploadbtn'）。クリック（function（）{popupdialog（）;}）; _plupload（ 'test'、 '$ {pagecontext.request.contextpath}/uploadfile'）;}）;ページコード、ボタン、ポップアップボックス
<a id = "uploadbtn" href = "＃"> file upload </a> <！ - ポップアップボックスをトリガー - > <div id = "uploadcontent" style = "display：none; height：300px; anoverflow-x：hidden; anoverflow-y：auto;"> <div id = "chookfile href = "javascript：void（0）;"> select file </a> </div> <div id = "uploadfilequeue" style = "border：" border： "border：" solid＃a7c5e2; height：228px; width：350px; "> </div> </div> <pre id ="
5。背景コード
カプセル化する方法がないので、はっきりと見るために自分でカプセル化することができます
/ ** *ファイルアップロードリクエストアドレス * * @param request * @Param Response */ @RequestMapping（ "uploadFile"）public void upload（httpservletrequest request、httpservletrequess Reponse） （commonsmultipartfile）multipartrequest.getfile（ "file"）; // get file string unid = uuid.randomuuid（）。toString（）。 string.valueof（file.getSize（））;/* file size*/ string path = null;/*ファイルストレージパス*/ string punid = request.getParameter（ "punid"）; / *関連ファイルPunid */// file if（file！= null）{try {string basepath = request.getSession（）。getServletContext（）。getRealPath（ "/uploadFile"）; SimpleDateFormat sdf = new SimpledateFormat（ "/yyyy/mm/dd/"）; string subpath = sdf.format（new date（））; path = basepath + subpath + unid + file.separator + originalFileName; //フォルダーが存在しない場合は、フォルダーファイルdir = newファイル（PATH）を作成します。 if（！dir.exists（））{dir.mkdir（）; } file.transferto（dir）; } catch（Exception e）{e.printstacktrace（）; }} //ファイルサイズ変換ロングkb = 1024; long mb = kb * 1024;長いgb = mb * 1024; long size = long.parselong（fliesize）; if（size> = gb）{fliesize = string.format（ "％。1fgb"、（float）size / gb）; } else if（size> = mb）{float f =（float）size / mb; fliesize = string.format（f> 100？ "％.0f mb"： "％.1f mb"、f）; } else if（size> = kb）{float f =（float）size / kb; fliesize = string.format（f> 100？ "％.0f kb"： "％.1f kb"、f）; } else {fliesize = string.format（ "％d b"、size）; } //ファイル情報をデータベースに保存fileupload fileupload = new fileupload（）; fileupload.setunid（unid）; fileupload.setoriginalfilename（originalfilename）; fileupload.setfliesize（fliesize）; fileupload.setPath（PATH）; fileupload.setpunid（punid）; SimpleDateFormat df = new SimpledateFormat（ "yyyy-mm-dd hh：mm：ss"）; fileupload.setflietime（df.format（new date（）））; fileuploadservice.insert（fileupload）; }ファイルIDに従ってダウンロードするためにファイルストリームを使用するダウンロード方法があります
@RequestMapping（ "DownloadFile"）public void downloadloadfile（httpservletrequest request、httpservletResponse Response）{string unid = request.getParameter（ "unid"）; fileupload fileupload = fileuploadservice.selectbyprimarykey（unid）; if（fileupload！= null）{try {string filename = new String（fileupload.getoriginalFileName（）。getBytes（ "gbk"）、 "ISO-8859-1"）; string path = fileupload.getPath（）; Response.setcharacterencoding（ "utf-8"）; Response.setContentType（ "Application/Octet-Stream"）; Response.setheader（ "content-disposition"、 "attachment; filename =" + filename）; Response.setheader（ "content-length"、fileupload.getfliesize（））; inputStream inputstream = new fileInputStream（new File（PATH））; outputStream os = response.getOutputStream（）; byte [] b = new byte [2048]; int length; while（（length = inputstream.read（b））> 0）{os.write（b、0、length）; } os.close（）; inputstream.close（）; } catch（filenotfoundexception e）{e.printstacktrace（）; } catch（ioexception e）{e.printstacktrace（）; }}}削除する方法もあります
/ **ファイル削除 * * @param request * @param Response */ @ResponseBody @RequestMapping（ "delfile"）public map <string、object> defile（httpservletrequest request、httpservletresponse response）{string unid = request.getParameter（ "unid"）; fileupload fileupload = fileuploadservice.selectbyprimarykey（unid）; //ローカルブールフラグ= false; file file = new file（fileupload.getPath（））; if（file.exists（））{//パスがファイルであり、空でない場合、flag = file.delete（）を削除します。 } //データベースを削除しますint result = fileuploadservice.deleteByPrimaryKey（unid）; if（result> 0）{flag = true; } map <string、object> map = new hashmap <string、object>（）; map.put（ "result"、flag）;マップを返します。 }上記は、編集者が紹介したArtdialog+Pluploadです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！