본문을 소개하기 전에 plupload에 대한 지식을 소개하겠습니다.
plupload 소개
Plupload는 Tinymce 개발자가 개발하여 컨텐츠 관리 시스템 또는 이와 유사한 업로드 프로그램에 고도로 사용 가능한 업로드 플러그인을 제공합니다. Plupload는 현재 코어 API 및 jQuery 업로드 큐 구성 요소로 나뉘어 직접 사용하거나 직접 사용자 정의 할 수 있습니다.
plupload 기능
Plupload는 jQuery 구성 요소를 파일을 선택하고 파일을 업로드하기위한 큐 구성 요소로 사용합니다.
Plupload는 Flash, Silverlight, HTML5, Gears, BrowserPlus 및 FileUpload를 사용하여 파일 기술 엔진을 업로드합니다.
plupload를 사용하면 사용자 정의가 Plupload Core API를 사용하여 파일을 선택하고 파일을 업로드 할 수 있습니다.
JavaScript는 파일 선택 대화 상자를 활성화하는 데 사용됩니다. 이 파일 선택 대화 상자는 사용자가 별도의 파일 또는 여러 파일을 선택할 수 있도록 설정할 수 있습니다. 선택한 파일 유형도 제한 될 수 있으므로 사용자는 JGP; GIF와 같은 적절한 파일 만 선택할 수 있습니다.
Plupload는 업로드 프로세스 중 일부 이벤트를 사용자 정의하고 자체 처리 방법을 작성할 수 있습니다.
선택한 파일의 업로드는 페이지와 형태의 위치와 무관합니다. 각 파일은 별도로 업로드되므로 서버 측 스크립트가 시점에서 단일 파일을보다 쉽게 처리 할 수 있습니다. 특정 정보는 Plupload의 공식 웹 사이트를 방문하십시오 : http://www.plupload.com/
배경 : 프로젝트에 사용 된 프론트 엔드 파일 업로드 컨트롤은 업로드였으며 모든 것이 한동안 평화로 웠습니다. "좋은 소식"은 현장에서 나왔고 고객은 iPad 시스템을 사용하기를 원했고 사진을 업로드하고 싶었습니다. 고객 마스터는 이마를 때리고 R & D에서 초과 근무를해야했습니다. 모두 알다시피 업로드는 플래시에 따라 다르므로 iOS 및 Mac 시스템에서는 불가능합니다. 그래서 Google 후에는 plupload를 발견했습니다. 시작하기가 더 쉽습니다.
페이지 HTML 코드 :
헤드 태그에는 필요한 JS 파일이 포함되어 있습니다
<script type = "text/javaScript"src = "js/jquery-1.9.1.min.js">/script>
<!-예술 대화->
<script type = "text/javaScript"src = "artdialog/artdialog.source.js? skin = blue"> </script>
<!-plupload->
<script type = "text/javaScript"src = "plupload/plupload.full.js"> </script>
신체 태그의 페이지 요소
<!-팝업 상자를 트리거-> <a id = "ubloadBtn"href = "#"> 파일 업로드 </a> <div id = "uploadContent"Style = "display : none; height : 300px; 오버 플로우 -x : hidden; 오버 플로에서 : auto;"> <div id = "chelection file"> <span <an <br </span> <an. id = "uploadify"href = "javaScript : void (0);"> 파일 선택 </a> </div> <div id = "uploadfilequeue"style = "border : 1px solid #a7c5e2; 높이 : 228px; 너비 : 350px;"> </div> <console "> </pre>
스크립트 태그의 코드
var globalUploader; function _plupload () {var uploader = new plupload.uploader ({html5 : 'html5, flash, silverlight, html4', browse_button : 'uploadify': // 페이지에 파일을 검색하는 Dom 객체의 ID 속성을 포함합니다. '/uploadaction !localupload.action',//receive actionflash_swf_url 파일로 업로드 : '/folder/js/js/plupload/moxie.swf' ,silverlight_xap_url :'/folder/js/plupload/moxie.xap' ,filters : {max_file_size : '100mb', // {max_file_size. MIME_TYPES : [// 파일 : "제목 :"이미지 파일 ","이미지 파일 ", 확장 제한 :"jpg, gif, png "}, init : {postinit : function () {$ ( '##uploadfilequeue'). html ( '' ');}, uploadfile : upload : // peforted infortomently triggerted refter in. 함수 (up, file) {// 버튼을 클릭 한 후 업로드하기 전에 나머지 공간을 확인할 수 있습니다. $ .ajax ({url : "/폴더/개인/개인 Action! getNewFilename.action", type : "post", async : false, data : { 'upfilename': file.name, 'globalPid': "json", success : function (data) {multipart_params를 설정합니다. {upfilename : data.newfilename, upfiletype : file.name.split ( ".") [file.name.split ( ") 파일 [ "+file.name+"] 업로드 ", ''); // $ ( '#uploadify'). uploadify ( 'cancel', file.id); // id}}});}); file.name + '(' + plupload.formatsize (file.size) + ') </span> <b> </b> <div> </div> </div> </div> </div>'); i ++;});}, 업로드 : 기능 (Up, File) {// 업로드를 시작하고 트러스트하는 것. 여기에서 file.percentDocument.getElementById (file.id) .getElementsByTagName ( 'b') [0] .innerHtml = '<Span>-' + file.percent + "%</span>"; //%$ ( '#' + file.id) .find ( '.' '%'); // progress bar}, error : function (up, err) {// 오류 트리거 문서. getElementById ( 'console'). innerHtml + = "/nerror#" + err.code + ":" + err.message;}, fileUploaded : function (up, file, info) {// trigger (firelding). "(" + info.response + ")"); // 서버에서 반환 한 데이터는 페이지에서 파일 목록을 수정할 수 있습니다. popupdialog () {artdialog ({id : 'file-upload', title : 'file upload', 'file upload', 'file upload', fixed : true, lock : true, content : $ ( "#uploadContent") function () {$ ( '##uploadfilequeue'). html ( ''); // 업로드 큐의 내용을 삭제하십시오. function () {$ ( '##uploadfilequeue'). html ( ''); // 업로드 큐의 내용 삭제 globaluploader.files.splice (0, globaluploader.files.length); // 업로드의 내용을 지우십시오. queue}});} $ (function () {$ ( '#uploadbtn'). click (function () {popupdialog ();}); _ plupload ();});배경 코드를 쓰지 않을 것입니다. struts2 백엔드 조치를 사용하여 개인 파일 파일을 사용하여 수신 된 파일을 수신했습니다. 다른 이름을 null로 변경하십시오. 아직 제어 에서이 값을 설정하는 방법을 모르겠습니다.
그러면 이것이 효과입니다
이 CSS 스타일을 진행 막대에 추가하려면 제어 할 수 있습니다.
<스타일 유형 = "text/css"> #uploadfilequeue {위치 : 상대; 왼쪽; 왼쪽 : 0; 상단 : 0; 경계 : 1px solid #a7c5e2; 마진-바닥 : 5px; #f5f5f5; */배경색 : #fff; -webkit-border-radius : 3px; Border-Radius : 3px; font : 11px verdana, 제네바, Sans-serif;/* margin-top : 5px; */margin : 5px 5px 5px 5px; max width : 350px; 패딩 : 10px;}. 업로드 컬러 {배경 색상 : #e5e5e5; 마진-탑 : 10px;}.}.최종 효과. 뭐, 큐에서 파일을 삭제하기 위해 업로드하고 싶습니다.
이것을 스타일로 추가하십시오
.uploadify -queue-item .cancel a {background : url ( 'js/uploadify-cancel.png') 0 0 0 0 No-Repeat; float : right; height : 16px; 텍스트-안정 : -9999px; 너비 : 16px;}물론 삭제 된 JS 코드도 추가해야합니다. 여기 공식 API에는 removefile (파일)이 있지만 여기서는 사용하기 쉽지 않습니다. 따라서 또 다른 방법은 분할 (num, 길이)에 사용되며, Num은 첫 번째에서 삭제되고 길이는 삭제 된 수입니다.
함수 _plupload_removefile (removenum, fileId) {globalUploader.files.splice (removenum, 1); // 일부 파일을 삭제합니다. $ (fileId) .fadeout ();}최종 효과.
위의 것은 편집자가 다중 플랫폼 업로드 파일을 달성하기 위해 소개 한 plupload+artdialog입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!