1. WebUploader 플러그인 사용 이유에 대한 설명
나는 지금하고있는 프로젝트에 속임을당했습니다.
내 프로젝트 아키텍처 스프링+struts2+mybatis+mysql 에 대해 먼저 이야기하겠습니다
그럼 뭐. 2G에 따라 업로드하기에 충분할 것이라는 데 동의 했으므로 AjaxFileUpload 플러그인을 사용했습니다. 이것을 사용하여 이전에 이미지를 업로드했기 때문에 첨부 파일을 업로드 할 때 직접 이미지를 사용했습니다.
다양한 코드와 코드가 테스트되었습니다. 2G 파일을 업로드하는 데 아무런 문제가 없습니다. 트릭이왔다. 프로젝트가 시작된 후 고객은 4G 파일을 업로드하도록 요청했으며 20G 이상이있었습니다. . 나니, 당신은 그것을 일찍 말하지 않았다. . .
IE11에서는 ajaxfileupload.js 플러그인을 사용하여 4G를 초과하는 파일을 업로드하고 IE는 직접 예외를 던집니다. 산술 결과가 32 비트 팝업을 초과하는 메시지.
아래 그림과 같이 :
추가로, 내 시스템은 64 비트, 8g 메모리, Google 브라우저 및 IE11 브라우저는 모두 32 비트입니다. Google에서 AjaxFileUpload를 사용하여 8g을 업로드하는 것은 문제입니다. 오류는보고되지 않습니다.
IE11은 4G 이상이며 위의 그림을 직접보고하는 것은 잘못입니다. 안 돼요. 플러그인을 변경하십시오.
2. 플러그인 선택
1. 플러그인을 업로드하자. Stream은 다른 브라우저로 파일을 업로드하는 문제를 해결하기위한 플러그인입니다. Uploadify의 플래시 버전과 HTML5의 조합입니다. 플러그인 주소 http://www.twinkling.cn/
이 기능은 실제로 매우 강력하지만 CSS 스타일은 고정되어 있으며 현재 프로젝트의 진행률 바 스타일과는 매우 다릅니다. 이 플러그인을 포기하십시오
2. Webuploader 플러그인. WebUploader는 간단한 최신 파일 업로드 구성 요소로 주로 html5이며 Baidu Webfe (FEX) 팀이 개발 한 플래시로 보충합니다. 최신 브라우저에서는 주류 IE 브라우저를 포기하지 않고 원래 플래시 런타임을 계속 사용하지 않고 IE6+, iOS 6+ 및 Android 4+와 호환됩니다. 동일한 호출 방법을 사용자가 선택할 수 있습니다.
대형 파일 조각화 동시 업로드를 사용하면 파일 업로드의 효율성이 크게 향상됩니다. 플러그인 주소 http://fex.baidu.com/webuploader/
이 플러그인은 CSS 스타일을 사용자 정의 할 수 있습니다. 기능도 매우 강력 하므로이 플러그인을 결정적으로 채택했습니다.
3. WebUploader 단일 파일 업로드
WebUploader 버전 0.1.5를 사용하고 있습니다. WebUploader는 주로 5m마다 샤드를 보내기위한 요청을 보내고, 배경에서 파일을 수신하여 파일 병합과 같은 클라이언트의 큰 파일을 슬라이드합니다. 파일을 병합하는 두 가지 방법이 있습니다. 첫 번째는 모든 파편을 배경으로 전달한 다음 병합하는 것입니다. 이것은 샤딩 순서가 올바른지 확인하고 두 번째는 샤드를하는 동안 병합하는 것입니다. 프로젝트에서 두 번째를 사용했습니다. 웹 업로더를 사용하여 파일을 업로드하려면 JS, CSS 및 SWF의 세 가지 리소스가 필요합니다.
1. JS 파일을 소개합니다
<script type = "text/javaScript"src = "../ main/js/webuploader.js"> </script> <script type = "text/javaScript"src = "../ main/js/webuploader.js"> </script>
2. CSS 스타일을 소개합니다
<link href = "../ main/css/webuploader.css"rel = "Stylesheet"type = "text/css"/>
3. SWF를 소개합니다 . SWF는이를 직접 언급하지 않습니다. WebUploader가 초기화 될 때 SWF 경로를 지정하십시오.
4.upload3.html
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"xml : lang = "ja"lang = "ja"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <meta http-equiv = "jangage" /> <meta http-equiv = "content-script-type"content = "text/javaScript"/> <meta http-equiv = "content-style-type"content = "text/css"/> <title> demo </title> <link href =. /> <link href = "../ main/css/webuploader.css"rel = "stylesheet"type = "text/css"/<script type = "text/javaScript"src = "../ main/jquery-1.11.1.min.js"> src = "../ main/js/jquery-2.1.4.min.js"> </script> <script type = "text/javaScript"src = "../ main/js/jquery-ui.min.js"> </script> <script type = "text/javascript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javaScript"src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script> <text/javaScript " src = "../ main/js/locales/bootstrap-datepicker.ja.min.js"> </script> <script type = "text/javascript"src = "../ main/js/webuploader.js"> </script> <script type = "text/javaScript" src = "../ main/js/webuploader.min.js"> </script> <script type = "text/javaScript"src = "../ js/contents/upload3.js"> </script> <body> <div id = "업 로더"> <!-파일 정보를 저장하는 데 사용 id = "att </div> </div> </body> </html>
사진은 비교적 간단합니다
5.upload3.js
단일 파일 업로드, 멀티 파일 업로드 및 여러 인스턴스의 WebUploader 포함
/*****************************************************************************************/$ (function () {var $ list = $ ( "#thelist"); var 업 로더; // instantiated uploder = webuploader.create ({auto : false, // same at it it ', "##" 쓸모가 없지만 디버거의 이름은 실제로 변경되었지만 파일의 이름 속성을 사용자 정의 할 때 파일을 검색 할 수 없습니다. // '멀티 파일', // 내가 사용한 버전은 클라이언트 디버거를 엽니 다. 파일을 사용할 때 파일을 검색 할 수 없습니다. // 저자는이 장소를 변경할 시간이있는 것이 좋습니다. 사람들을 죽일 것입니다. 서버 : "confentsDetail! ajaxattachupload.action", duplication : true, // //는 동일한 파일입니다 : gals 청크 : true, // // Shash Processing Chunksize : 5 * 1024 * 1024, // Slice Chunkretry 당 5m : false, // 실패하면 스레드를 시도하지 마십시오 : 1, // 동시 번호를 업로드하십시오. 동시에 허용되는 최대 업로드 프로세스 수. // runtimeorder : 'flash', // 전역 드래그 함수를 비활성화합니다. 이미지가 페이지로 끌려 갈 때 이미지를 열면 나타나지 않습니다. disableglobaldnd : true}); // 파일이 추가되면 UPLOADER.ON ( "FILEQUEUED", function (file) {console.log ( "filequeued :"); $ list.append ( "<div id = ' + file.id +"'class = 'item'> " +"<h4 class = 'info'> " + file.name +"</h4> "<p class = 'state'> up -up -up '> +"</div>");}); // 모든 파일이 업로드되면, 업로더. upload.on ( "uploadaccept", function (object, ret) {// 서버가 응답 한 //ret._raw는 datavar data = json.parse (ret._raw); if (data.resultCode! = "1"&& data.resultCode! = "3") {if (data.resultCode == "9") {uploader.reset (); alert ( "error"); return false;}} else {// e05017uploader.reset (); alert ( "error"); return false;}}) // 파일 업로드가 성공할 때 무료. UPLOWER.on ( "uploadSuccess", function (file) {$ ( "#"+file.id) .find ( "p.state"). text ( "Uploaded");}); Uploader.on ( "uploaderRor", function (file) {$ ( "#"+file.id) .find ( "p.state"). error");uploader.cancelFile(file);uploader.removeFile(file,true);uploader.reset();});$("#upload").on("click", function() {uploader.upload();})});/******************************************************WebUpload Single file upload end*********************************************//************************************************WebUpload Multi-file upload begin******************************************************//$(function(){var $list = $("#thelist1");var filesize = 0; 총 파일 크기 var filename = []; // 파일 이름 목록 var filesizeonebyone = []; // 각 파일 크기 var ubloader; // instantiated uploder = webuploader.create ({auto : // 자동으로 업로드 할 것인지 : {multi ', label', label ', selfile. '../../main/js/uploader.swf', 서버 : "contentsDetail! multiupload.action", duplication : true, //는 동일한 파일 resize : false, formdata : { "status": "multi", "contentsdto.contentsid": "0000004730", "uploadnum": "0000004730", "Exportflg": 'false'}, compress : null, // 그림은 compressed chunked : // shash chunksize : 5 * 1024 * 1024, // 5MCHUNKSIZE, // 5MCHUNK :/OW IT :/OF IT :/OW IT :/5MCHUNKSIZE가 압축되지 않습니다. 실패, 다시 시도하지 마십시오. 스레드 : 1, // 동시 번호를 업로드하십시오. 동시에 허용되는 최대 업로드 프로세스 수. // filenumlimit : 50, // 총 파일 수를 확인합니다. 초과하면 대기열에 가입 할 수 없습니다 .// runtimeorder : 'Flash', // 전역 드래그 앤 드롭 함수를 비활성화합니다. 이렇게하면 이미지가 페이지로 끌려 갈 때 이미지를 엽니 다. disableglobaldnd : true}); // 파일이 추가되면 UPLOADER.ON ( "filequeued", function (file) {console.log ( "filequeued :"); $ list.append ( "<div id = ' + file.id +"'class = 'item'> " +"<h4 class = 'info'> " + file.name +"</h4> "<p class = </p>" +"</div>");}); // 업 로더가 시작되면 업 로더. { "filesize": filesize, "multifilename": filename.join ( ","), "FilesizeOneByOne": 파일이 서버 응답에 업로드 된 후 서버 응답이 유효한지 묻습니다. Uploader.on ( "UploadAccep", function (object, ret) {// 서버가 응답 한 //ret._Raw는 dataconsole.log ( "uploadaccept"); console.log (ret); var data = json.parse (ret._raw); if (data.resultcode! == "9") {alert ( "error"); uploader.reset (); return;}} else {uploader.reset (); alert ( "error");}}) uploader.on ( "uploadsuccess", filts (file) {$ ( "#"+file.id ) .find ( "p.state"). text ( "Uploaded");}); Uploader.on ( "uploadError", 함수 (파일, 이유) {$ ( "#"+file.id) .find ( "p.state"). text ( "uploaderror"); console.log (file); console.log (이유); i = 0; i <filearray.length; i ++) {uploader.cancelfile (filearray [i]); upload.removefile (filearray [i], true);} uploader.reset (); filesize = 0; filename = []; filesizeoneyone = [];}); 오류 이벤트 업 로더 ( "error", function () {console.log ( "error"); uploader.reset (); filename = []; filesizeonebyone = []; alert ( "error");}) // 모드 상자에서 업로드 버튼이라면 내부 클릭을 클릭 할 때 트리거되지 않을 것입니다. file/* $ ( "#multi .webuploader-pick"). 클릭 (function () {) {uploader.reset (); filesize = 0; filename = []; filesizeonebyone = []; $ ( "#multi : file"). click (); // key code});* // $ (document) .on ( "change", "input [name = 'multifile']", function () {var filearray1 = uploader.getfiles (); for (var i = 0; i <filearray1.length; i ++) {// 파일 사이즈 사용 += filearray1 [i] .size; filearray1 [i] .size); filename.push (filearray1 [i] .name);} console.log (filesize); console.log (filesize); console.log (filensize.log); multi fit upload*/$("input[name='multiUpload']").on("click",function(){uploader.upload();})});/******************************************************WebUpload Multi-file upload end************************************************//****************************************************** The parameters of the webuploader are submitted to the background.********************************************************** {//web uploader The built-in parameters LastModifiedDate = [2016 년 4 월 27 일 16:45:01 GMT+0800 (China Standard Time)], Chunks = [3], Chunk = [0], type = [audio/wav], uid = [yangl], id = [wu_file_0], size = [26862063], name = [3.wav] contentsdto.contentsid = [0000004730], expectionflg = [false], status = [file], uploadNum=[0000004730]}******************************************************************************************************************************************/6.ContentsDetail.action
// 단일 파일 업로드 배경 코드 공개 ajaxattachupload () {String path = "d : //"+filefilename; try {file file = this.getfile (); fileUtil.RandomAccessFile (path, file); // 파일이 작고 5m 인 경우 Shard 매개 변수 덩어리의 값은 샤드 매개 변수 덩어리입니다. nullif (stringUtils.isempty (chunk)) {outjson ( "0", "success", "");} else {// 청크 샤드 인덱스, 첨자는 0 // chunks total shard count if (integer.valueof (integer.valueof (integer.values)) {outjson ( "0", ",", ",", "," "");} else {outjson ( "2", "업로드" + filefilename + "chunk :" + chunk, "");}}} catch (예외 e) {outjson ( "3", "업로드 실패", ");}}fileutil.java
/*** 파일을 쓰기 시작하는 위치를 지정* @param tempfile 입력 파일* @param outpath 경로에 출력 파일 (path + 파일 이름)* @throws ioexception*/public static void RandomAccessFile (String OutPath, File Tempfile)은 ioexception {randomAccessfile rafile = null; null inputstam; inullStam; 새 파일 (outPath); // rafile = rafile = new randomaccessfile (Dirfile, "RW")에서 대상 파일을 엽니 다. rafile.seek (rafile.length ()); inputStream = new bufferedInputStream (new fileInputStream (tempfile)); byte [] buf = new Byte [1024]; int 길이 = 0; while (length = inputStream.read (buf)) {rafile.write (buf, 0, 0, 0,) ioException (e.getMessage ());} 마지막으로 {try {if (inputStream! = null) {inputStream.close ();} if (rafile! = null) {rafile.close ();}} catch (예외 e) {wrach new ioException (e.getMessage ())}}}}}} 7. 효과 사진
위의 것은 편집기가 소개 한 Java의 대형 파일, 단일 파일 및 여러 파일을 업로드하는 방법에 대한 관련 지식입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!