이전 :
지난 며칠 동안 WebUploader 파일의 업로드를 연구했습니다. 이전 블로그는 WebUploader를 사용하여 파일을 단순히 업로드하는 예제를 기록합니다. 오늘은 파편과 중단 점을 업로드하는 예를 기록 할 것입니다. 블로그 파크에서 나는 또한 몇 가지 정보를 보았습니다. 기본적으로 데이터의 백엔드 처리는 Servlet 또는 SpringMVC입니다. 최근 프로젝트는 항상 Struts2 였으므로 Struts2의 동작을 사용하여 파일 업로드의 효과를 달성하기 위해 데이터를 처리합니다.
1. 샤드 업로드는 무엇입니까?
이름에서 알 수 있듯이 파일을 조각으로 나누는 것을 의미합니다. 즉, 파일을 여러 개의 작은 파일로 나눈 다음 업로드합니다. 이것의 장점은 큰 파일 업로드를 용이하게한다는 것입니다.
2. 샤드 업로드에 대한 일반적인 아이디어 :
1. 프론트 데스크 페이지에서 파일을 선택하고 버튼을 클릭하여 업로드하십시오.
2. WebUploader 업로드 된 파일을 지정된 숫자로 나누고 서버 백엔드로 하나씩 보냅니다.
3. 서버는 분할 된 작은 파일을 수신하여 임시 폴더에 저장합니다.
4. 서버가 분할 된 작은 파일을 수신 한 후 전경 페이지가 업로드 성공적인 기능을 실행합니다.
5. 성공적인 기능 업로드에서 요청을 서버에 보내고 작은 파일을 전체 파일로 병합하도록 요청하십시오.
6. 서버 배경은 파일을 병합하고 병합이 완료된 후 작은 파일을 저장하는 임시 파일을 삭제합니다.
샤드 업로드의 일반적인 과정을 이해 한 후에는 데모로 직접 이동하십시오.
프론트 데스크 페이지 :
<%@ page contenttype = "text/html; charset = utf-8"language = "java"%> <%string scheme = request.getScheme (); 문자열 serverName = request.getServerName (); 문자열 contextPath = request.getContextPath (); int port = request.getServerport (); // 웹 사이트 액세스 및 경로 문자열 baseurl = scheme + ": //" + servername + ":" + port + contextPath; request.setattribute ( "baseurl", baseurl);%> <html> <head> <title> 조각난 </title> <%-CSS 스타일 소개-%> <link href = "$ {baseurl} /webuploader0.1.5/webuploader.css"replollow ""external nof ""replollow ". 유형 = "text/css"/> <script src = "$ {baseurl} /ligerui2/jquery/jquery-1.9.0.min.js"type = "text/javaScript"> </script> <%-파일 업로드 플러그인 소개-%> <script type = "text/javascript" src = "$ {baseurl} /webuploader0.1.1.5/webuploader.min.js"> </script> <script type = "text/javaScript"> $ (function () {/* 업 로더 생성이 생성 될 때까지 대기하는 것이 가장 좋습니다. DIV가 생성되기 때문에 파일이 만들어지기 때문입니다. 따라서 무시하기 쉬운 장소에서 $ (function () {}를 여기에 넣으십시오. '파일'] 파일 업로드 : // 옵션을 선택하십시오. 이것은 핵심입니다. Shard 업로드가 활성화되면 업로드 수를 동시에 제한하지 않으며, 예를 들어 배경에 의해 수용된 파편이 일관성이 없어지면 첫 번째 슬라이스는 시작이어야합니다. 따라서 수락 순서는 1 */ 스레드로 설정되어 있습니다. 1, // 자동 업로드 : 큰 파일 업로드를 처리하고 싶습니까? JPEG입니다. 업로드하기 전에 다시 압축하고 업로드합니다! // 프로젝트 요구 사항에 따라 $ one = $를 작성하십시오. }); / / / // 특정로드 (file, prentare) ( "uploadprogress ==="+백분율); "#state"). 함수 (파일) {// console.log ( '업로드 성공 .../n'); math.size / (5 * 1024 * 1024), filename : function (data) {}; "파일 업로드 ~~~"; 이 이벤트는 성공 또는 실패에 관계없이 진행됩니다 $ ( "#btncancel") 클릭 (function () {// 로지스틱 프로세스 ..}); id = "btncancel"> 업로드 취소 </button> </div> </div> </body> </html>백엔드 액션 :
/** * 설명 : com.ims.Action * 저자 : eleven * 날짜 : 2017/12/26 10:50 */@Controller ( "FileAction") 공개 클래스 FILEACTION {/ * 세분화 요청을받는 데 사용되는 각 작은 파일의 관련 매개 변수 * // 해당 설정 GET 파일 개체 (형식 유형의 이름 값과 동일)를 제공하는 것을 기억하십시오. // 파일 이름 개인 문자열 uploadFilename; // 유형을 업로드 개인 문자열 업로드 ContentType; /** * 다음 변수는 공개적이므로 매개 변수가 너무 많으므로 비공개로 설정하고 Get and Set 메소드를 작성하고 싶지 않습니다. public string guid; // merge and split은 모두 merge 요청 공개 문자열 filename을 수신하고 보내는 데 사용됩니다. // 파일 이름 공개 문자열 청크; // 세그먼트 번호 // 샤드에서 파일을 업로드 할 때이 메소드는 작은 파일을 업로드 할 때마다 호출됩니다. 일반적인 저장 파일과 다르지 않습니다. 공개 void uploadfile2 ()는 예외 {string Str = "d :/upload44/divide/"; // 파일 저장 경로 // 각 작은 파일의 경로 저장 문자열 realpath = str + guid + "/" + chunk; 파일 tmp = 새 파일 (realPath); FileUtils.copyFile (업로드, TMP); System.out.println ( "파일 업로드"+uploadfilename+", 블록 :"+chunk+", 크기 :"+(upload.length ()/1024/1024)+"m"); } // 파일 병합 공개 void mergefile ()은 예외 {string path = "d :/upload44/merge/"; // 병합 폴더 생성 새 파일 (path) .mkdir (); // 병합 된 파일 생성 파일 NewFile = 새 파일 (Path + Filename); if (! newfile.exists ()) {newFile.CreatenewFile (); } fileoutputStream outputStream = new FileOutputStream (newFile, true); // 바이트에 파일 추가를 추가합니다 [] byt = new Byte [10 * 1024 * 1024]; int len; fileInputStream temp = null; // shash 파일에 대한 파일 (int i = 0; i <integer.parseint (chunks); i ++) {// "d :/upload44/divide/" + guid + "/" + i 분할 된 작은 파일의 경로를 저장하려면 새로운 파일 (새 파일/" + divide/" + " +" + "); while ((len = temp.read (byt))! = -1) {system.out.println (len); outputStream.write (byt, 0, len); } temp.close (); } // 모든 부록 쓰기가 완료되면 스트림은 닫을 수 있습니다. outputStream.close (); // 샤드 파일 삭제 문자열 path2 = "d :/upload44/divide/" + guid; fileUtils.deletEdirectory (새 파일 (path2)); // 디렉토리 시스템에서 모든 내용을 삭제합니다. } 공개 파일 getUpload () {return ubload; } public void setUpload (파일 업로드) {this.upload = 업로드; } public String getUploadFilename () {return uploadFilename; } public void setUploadFileName (String uploadFilename) {this.uploadFilename = uploadFilename; } public String getUploadContentType () {return uploadContentType; } public void setUploadContentType (String uploadContentType) {this.uploadContentType = uploadContentType; }}struts.xml 구성 :
<action name = "uploadfile2"method = "uploadfile2"> </action> <action name = "mergefile"method = "mergefile"> </action>
좋아, 여기, 간단한 파일 조각화 브레이크 포인트를 업로드하는 것이 완료되었습니다.
그건 그렇고, 배경은 몇 가지 간단한 매개 변수를 수신하며, 물론 프론트 엔드 WebUploader에서 전달되는 위의 매개 변수보다 더 많은 것이 있습니다. 따라서 F12 디버깅 모드를 사용하여 보낸 요청 및 관련 요청 매개 변수를 볼 수 있습니다. 나는 여기서 그것에 대해 이야기하지 않을 것입니다.
스크린 샷 실행 :
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.