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