이 기사에서는 여러 파일을 업로드하고 SWFUPload의 파일 수를 제한하는 방법에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
Swfupload는 플래시 및 JavaScript를 기반으로 클라이언트 파일 업로드 구성 요소입니다.
handlers.js 파일
완전한 파일 큐잉 (FileQueued) →
파일 선택 (filedialogComplete) → 업로드 시작 (업로드 스타트) → 업로드 프로세싱 (업로드 프로그램) → 성공 업로드 성공 (업로드 소송) → 완료를 업로드 (업로드 컴퓨터) →
queuecomplete
위의 바와 같이, 위의 콜백 함수가 단일 선택 파일로 순서대로 실행되는 경우 여러 파일이 선택되었다는 점에 유의해야합니다. FileQueued 및 QueeeComplete는 한 번만 실행되며 FiledialoGComplet은 ... → 업로드 컴퓨터는 파일 당 한 번 실행됩니다.
공식적인 예를 참조하여 기본 기능을 완료 한 후, 모방 간지는 iframe 메소드를 채택합니다.
썸네일 미리보기 수와 삭제 및 업로드 된 사진 수에 대한 제한을 달성하기 위해
썸네일 표시, 썸네일을 삭제하려면 버튼을 생성하고
Thumbimages는 부모 페이지의 축소판 Divs를 표시합니다
SRC_S는 생성 된 썸네일 주소입니다
SRC_B는 원래 이미지 주소입니다
ServerData는 이미지 업로드 처리 페이지에서 반환 된 데이터입니다. 성공 형식으로 반환됩니다 | 썸네일 주소 | 원본 주소 | 원본 주소
함수 uploadSuccess (file, serverData) {try {var result = serverData.split ( '|'); if (result [0]! = 'success') {var progress = new FileProgress (파일, this.CustomSettings.ProgressTarget); Progress.seterror (); Progress.setStatus (ServerData); Progress.ToggleCancel (False); } else {var progress = new FileProgress (File, this.CustomSettings.ProgressTarget); progress.setComplete (); progress.setstatus ( "업로드 완료"); Progress.ToggleCancel (False); var img_url_s = 결과 [1]; var img_url_b = 결과 [2]; addimage (img_url_s, img_url_b); }} catch (ex) {this.debug (ex); }} 함수 addImage (src_s, src_b) {var newdiv = parent.document.createelement ( "div"); newdiv.style.margin = "5px"; newdiv.style.height = "60px"; newdiv.style.width = "80px"; newdiv.style.border = "1px solid #7f9db9"; newdiv.style.cssfloat = "왼쪽"; newdiv.style.stylefloat = "왼쪽"; newdiv.style.position = "상대"; var newa = parent.document.createElement ( "a"); newa.className = "삭제"; newa.title = "삭제"; newa.href = "javaScript ::"; newa.onclick = function () {deldiv (newdiv);}; var newInput_s = parent.document.createElement ( "입력"); newInput_s.type = "숨겨진"; newInput_s.Value = src_s; newInput_s.name = "image_s []"; Newa.appendChild (newInput_s); var newInput_b = parent.document.createElement ( "입력"); newInput_b.type = "숨겨진"; newInput_B.Value = src_b; newInput_b.name = "image_b []"; Newa.appendChild (NewInput_B); var newimgdiv = parent.document.createElement ( "div"); var newimg = parent.document.createElement ( "IMG"); newimg.style.height = "60px"; newimg.style.width = "80px"; Newimgdiv. AppendChild (Newimg); Newdiv. AppendChild (Newimgdiv); Newdiv. AppendChild (Newa); parent.document.getElementById ( "ThumbImages"). AppendChild (NewDiv); if (newimg.filters) {try {newimg.filters.item ( "dximagetransform.microsoft.alpha"). 불투명 = 0; } catch (e) {// 처음에 설정되지 않으면 브라우저에 오류가 발생합니다. 아직 설정되지 않은 경우 설정됩니다. newimg.style.filter = 'progid : dximagetransform.microsoft.alpha (불투명 =' + 0 + '); }} else {newimg.style.opacity = 0; } newimg.onload = function () {fadein (newimg, 0); }; newimg.src = src_s;} 함수 fadein (요소, 불투명) {var retepopacityby = 5; var rate = 30; // 15 fps if (불투명도 <100) {불투명도 += retedopacityby; if (불투명도> 100) {불투명도 = 100; } if (element.filters) {try {element.filters.item ( "dximagetransform.microsoft.alpha"). 불투명 = 불투명; } catch (e) {// 처음에 설정되지 않으면 브라우저에 오류가 발생합니다. 아직 설정되지 않은 경우 설정됩니다. element.style.filter = 'progid : dximagetransform.microsoft.alpha (불투명도 =' + 불투명도 + '); }} else {element.style.opacity = 불투명도 / 100; }} if (incacity <100) {settimeout (function () {fadein (요소, 불투명);}, 속도); }}나머지 업로드 된 파일의 처리와 관련하여
함수 queeecomplete (numfilesuploaded) {this.setbuttondisabled (false); var stats = this.getStats (); var status = document.getElementById ( "divstatus"); status.innerhtml = "업로드 된" + stats.successful_uploads + "파일," + parseint (this.settings [ 'file_upload_limit']]-stats.successful_upleads) + "filts";} 함수 deldiv (mydiv) {mydiv.parentnode. // swfu iframe 페이지에서 swfu를 참조하십시오. swfu = new swfupload (설정); var stats = swfu.getstats (); stats.successful_uploads-; SWFU.SETSTATS (STATS); var status = document.getElementById ( "divstatus"); status.innerhtml = "업로드 된" + stats.successful_uploads + "파일은" + parseint (swfu.settings [ 'file_upload_limit']-stats.successful_uploads) + "files";}도 업로드 할 수 있습니다.iframe의 사용 때문일 수 있습니다
Deldiv 함수의 SWFU는 이것으로 대체 할 수 없습니다
전반적인 효과는 그림과 같습니다.
사진을 업로드하고 정보를 다시 수정 한 후에는 업로드 된 사진 수를 얻고 SWFUPLOAD에 결합해야합니다.
PHP를 통해 배경에서 업로드 된 이미지 경로를 가져 와서 Smarty를 통해 JS 배열로 제공하십시오.
var img_arr = new array (); {if isset ($ img_arr)} {섹션 이름 = 'img_arr'loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = new 배열 ( '{$ img_arr [img_arr] .images_s}', '{$ img_arr [img_arr] .images_b}'); {/section} {/if}다음 정보를 얻으려면 swfupload 문서를 쿼리하십시오
Flashready ()
이 이벤트 기능은 내부 이벤트이며 다시 작성할 수 없습니다. 이 이벤트는 SWFUPLOAD가 인스턴스화되고로드 된 플래시가 모든 초기화 작업을 완료하면 트리거됩니다.
알림 : 해당 설정에서 SWFUPLOAD_LOADED_HANDLER
SWFUPLOAD 설정에서 SWFUPLOAD_LOADED_HANDLER를 설정하십시오
swfupload_loaded_handler :로드,
그런 다음 handlers.js에서로드 된 함수를 정의하십시오
함수 loaded () {if (img_arr.length! = 0) {for (val in img_arr) {addimagefromdb (img_arr [val] [0], img_arr [val] [1], this); }}}업로드 된 이미지의 수를 수정하고 업로드 된 이미지의 축소판을 생성하려면 addimagefromdb 기능을 호출하십시오.
// 업로드 된 이미지 기능 초기화 addImagefromdb (src_s, src_b, swfu) {var stats = swfu.getstats (); stats.successful_uploads ++; SWFU.SETSTATS (STATS); var status = document.getElementById ( "divstatus"); status.innerhtml = "uploaded <font color = 'green'>" + stats.successful_uploads + "</font> zhang, <font color = 'red'>" + parseint (swfu.settings [ 'file_upload_limit']-stats.sats. "; addImage (src_s, src_b);}JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.