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"> <scrc = "resources/js/jquery.min.js"> </script> <script src = "resources/upload/plupload.full.min.js"> <script> src = "Resources/ArtDialog4.1.7/artdialog.source.js? skin = blue"> </script> <script src = "resources/js/upload.js"> </script>
JS 코드
_plupload (binde 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 = "#"> 파일 업로드 </a> <!-팝업 상자를 트리거합니다-> <div id = "uploadContent"Style = "display : none; height : 300px; 오버 플로우 -x : hidden; 오버 플로에서 : auto;"> <div id = "span> <span> <</<an </<an </<an </<an <divfile"> id = "uploadify"href = "javaScript : void (0);"> 파일 선택 </a> </div> <div id = "uploadfilequeue"style = "border : 1px solid #a7c5e2; 높이 : 228px; 너비 : 350px;"> </div> <console "> </pre>
5. 배경 코드
나는 그것을 캡슐화하는 방법이 없으므로 명확하게보기 위해 직접 캡슐화 할 수 있습니다.
/ ** * 파일 업로드 요청 주소 * * @param request * @param response */ @requestmapping ( "uploadfile") public void upload (httpservletrequest request, httpservletresponse responsk) {multiparthtpservletrequest multiparthtpletrequest) 요청; // binary uplatipartfile request); (CommonSmultipartFile) multipartrequest.getFile ( "file"); // 파일 문자열 get string unid = uuid.randomUuid (). toString (). replart ( "-", "";/* string originalFilename = file.getoriginalFilename ();/* extersix*/ string*/ string*/ string*/* 원본 파일 이름을 포함합니다. String.Valueof (file.getSize ());/* 파일 크기*/ String Path = null;/* 파일 스토리지 경로*/ String Punid = request.getParameter ( "Punid"); / * 관련 파일 punid */// if (file! = null) {try {string asepath = requestsession (). getServletContext (). getRealPath ( "/uploadFile"); simpledateformat sdf = new simpledateformat ( "/yyyy/mm/dd/"); 문자열 subpath = sdf.format (new date ()); PATH = BASEPATH + SUBPATH + UNID + file.separator + OriginalFilename; // 폴더가 존재하지 않으면 폴더 파일을 만듭니다. dir = 새 파일 (path); if (! dir.exists ()) {dir.mkdir (); } file.transferto (dir); } catch (예외 e) {e.printstacktrace (); }} // 파일 크기 변환 long kb = 1024; 긴 MB = KB * 1024; 긴 GB = MB * 1024; long size = long.parselong (fliesize); if (size> = gb) {fliesize = string.format ( "%. 1f gb", (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); } // 파일 정보를 데이터베이스에 저장 파일 upload fileUpload = new FileUpload (); fileUpload.setunid (unid); fileUpload.setoriginalFilename (OriginalFilename); fileUpload.setfliesize (fliesize); fileUpload.setPath (Path); fileUpload.setPunid (punid); simpledateformat df = 새로운 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 응답) {string unid = request.getParameter ( "unid"); fileUpload fileUpload = fileUploadService.SelectByPrimaryKey (UNID); if (fileUload! = null) {try {string filename = new String (fileUpload.getoriginalFilename (). getBytes ( "gbk"), "iso-8859-1"); 문자열 path = fileUpload.getPath (); 응답 .SetchAracterEncoding ( "UTF-8"); Response.setContentType ( "Application/Octet-stream"); response.setHeader ( "내용화", "첨부 파일; filename =" + filename); response.setHeader ( "Content-Length", fileUpload.getfliesize ()); inputStream inputStream = new FileInputStream (새 파일 (Path)); outputStream os = response.getOutputStream (); 바이트 [] B = 새로운 바이트 [2048]; int 길이; while ((길 } os.close (); inputStream.close (); } catch (filenotfoundException e) {e.printstacktrace (); } catch (ioexception e) {e.printstacktrace (); }}}삭제하는 방법도 있습니다
/ ** * 파일 삭제 * * @param request * @param 응답 */ @ResponseBody @RequestMapping ( "delfile") public map <string, object> defile (httpservletRequest request, httpservletResponse 응답) {string unid = request.getParameter ( "Unid"); fileUpload fileUpload = fileUploadService.SelectByPrimaryKey (UNID); // 로컬 부울 플래그 = false 삭제; 파일 = 새 파일 (fileUpload.getPath ()); if (file.exists ()) {// 경로가 파일이고 비어 있지 않은 경우 flag = file.delete (); } // 데이터베이스 int int result = fileUploadService.DeleteByPrimaryKey (UNID); if (result> 0) {flag = true; } map <String, object> map = new Hashmap <String, Object> (); map.put ( "결과", 플래그); 리턴 맵; }위는 편집자가 소개 한 ArtDialog+Plupload입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!