이 예에서는 CSS, js 및 img 파일뿐만 아니라 다른 두 개의 PHP class.upload.php 및 function.php를 사용합니다 전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요. 렌더링은 다음과 같습니다. 구현 코드는 다음과 같습니다. 자바스크립트 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. $(문서).ready(함수() { <br> $("#filelist").niceScroll({ <br> 커서 너비: "8px", <br> 커서순서 반경: "0px", <br> cursoropacitymin: 0.1, <br> Cursoropacitymax: 0.3 <br> }) <br> <br> $(".side-pane").niceScroll({ <br> 커서 너비: "8px", <br> 커서순서 반경: "0px", <br> cursoropacitymin: 0.1, <br> Cursoropacitymax: 0.3 <br> }) <br> <br> $(".time").timeago() <br> }) <br> <br> </div> 자바스크립트 코드는 다음과 같습니다. <p> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="82390" class="copybut" id="copybut82390" onclick="doCopy('code82390')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span><div class="codebody" id="code82390"><script type="text/javascript"> <br> // <![CDATA[ <br /> <br /> $('#upload_button').click(function() { <br /> $('.side-pane').html(''); <br /> $('#upload_button').hide(); <br /> $('#pickfiles').hide(); <br /> $('#upload_info').show(); <br /> $('#upload_info').css("display","inherit"); <br /> uploader.start(); <br /> <br /> $('#filelist').block({ <br /> message: '<center><div class="start-message">Upload in Progress</div></center>', <br> css: { <br> border: 'none', <br> backgroundColor: 'none' <br> }, <br> overlayCSS: { <br> backgroundColor: '#fff', <br> opacity: '0', <br> cursor: 'wait' <br> } <br> }); <br> }); <br> <br> var uploader = new plupload.Uploader({ <br> runtimes : 'flash, html5', <br> browse_button : 'pickfiles', <br> container : 'uploader', <br> max_file_size : '10mb', <br> url : 'upload.php', <br> flash_swf_url : 'uploader/uploader.swf', <br> filters : [ <br> { title : "Image files", extensions : "jpg,jpeg,gif,png" } <br> ] <br> }); <br> <br> uploader.bind('Init', function(up, params) {}); <br> uploader.init(); <br> <br> uploader.bind('FilesAdded', function(up, files) { <br> /* <br> @@ Show / hide various elements <br> */ <br> $('.upload-message').hide(); <br> $('.info-message').hide(); <br> $('#upload_button').show(); <br> $('#filelist_header').show(); <br> <br> $.each(files, function(i, file) { <br> $('#filelist').append( <br> '<div id="' + file.id + '" class="filecontainer">' + <br> '<div class="filename"> '+file.name + '</div>'+ <br> '<div class="filesize">' + plupload.formatSize(file.size) + '</div>'+ <br> '<div class="filestatus" id="status_'+file.id+'">0%</div>'+ <br> '<div class="filedel"><a id="remove_'+file.id+'" href="javascript:;"><img src="img/uploader/delete.gif" /></a></div>' + <br> '</div>'); <br> <br> $('#remove_' file.id).click(function(e) { <br> Uploader.removeFile(파일) <br> $('#' file.id).hide('slow', function() { ('#' file.id).remove(); }); <br> }); <br> }); <br> <br> up.새로고침(); <br> $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500); <br> }); <br> <br> uploader.bind('UploadProgress', function(up, file) { <br> $('#status_' file.id).html(file.percent "%"); <br> if(file.percent == 100) { <br> $('#' 파일.id).block({ <br> 메시지: '', <br> CSS: { <br> 테두리: '없음', <br> 배경색상: '없음' <br> }, <br> 오버레이CSS: { <br> 배경색상: '#fff', <br> 불투명도: '0.7', <br> 커서: '잠깐' <br> } <br> }); <br> } <br> $('#percent').width(uploader.total.percent "%"); <br> $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024) "kb/sec"); <br> }); <br> <br> uploader.bind('FileUploaded', function(up, file, response) { <br> var 입력 = $("#uploaded_photos"); <br> var 데이터 = response.response; <br> var 세부사항 = data.split(','); <br> if(details[0] == '성공') { <br> var photo_html = '<div class="padding-10 hm-photoclearfix"><a href="../upload/source/' 세부정보[4] '" target="_blank"><img src="../upload/small/' 세부정보[4] '"></a><p class="small-text light-text">' 세부정보[1] '</p><abbr class="time small-text" title="' 세부정보[2] '"></abbr></div>'; <br> input.val(input.val() 세부정보[1] ":"); <br> } 다른 { <br> var photo_html = '<div class="clearfix">' 세부정보[1] '</div>'; <br> } <br> $('.side-pane').prepend(photo_html); <br> $('.time').timeago(); <br> }); <br> <br> uploader.bind('UploadComplete', function(up, files) { <br> $('#upload_info').hide(); <br> $('#filelist').차단 해제({ <br> onUnblock: 함수 () { <br> $('#filelist_header').hide(); <br> $('#filelist').html('<div style="margin-top: 180px; text-align: center;"><strong>확인</strong><br/>모든 사진에는 업로드되었습니다.</div>'); <br> } <br> }); <br> }); <br> <br> // ]]> <br> </div> <p>상면2个jsDU放在index.php里면</p> <p>XML/HTML代码如下:<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="60364" class="copybut" id="copybut60364" onclick="doCopy('code60364')"><u>复代码</u></a></span> 代码如下:</div> <div class="codebody" id="code60364"><div id="uploader" class="main-pane"> <br> <div id="filelist_header" class="clearfix"> <br> <div class="filename">이름</div> <br> <div class="filesize">크기</div> <br> <div class="filestatus">상태</div> <br> <div class="filedel"></div> <br> <div></div> <br> </div> <br> <br> <div id="filelist"></div> <br> <br> <div class="action-btns"> <br> <a id="pickfiles" class="login-button btn">업로드할 파일 선택</a> <br> <a href="자바스크립트:;" id="upload_button" class="로그인 버튼 업로드 숨기기">업로드</a> <br> </div> <br> <br> <중앙> <br> <div id="upload_info"> <br> <div id="upload_info_inner"> <br> <div class="progressbg"> <br> <div id="percent" class="progress"></div> <br> </div> <br> </div> <br> <br> <div id="알 수 없음"> <br> <div id="time2go"></div> <br> <div id="upRate"></div> <br> </div> <br> </div> <br> </center> <br> <br> <form method="POST" action="process.php" id="processupload"> <br> <input type="hidden" name="uploaded_photos" id="uploaded_photos" /> <br> <input type="hidden" name="fkey" value="<?php echo $fkey; ?>" /> <br> </양식> <br> </div></div> <p>upload.php 페이지 코드는 다음과 같습니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="99885" class="copybut" id="copybut99885" onclick="doCopy('code99885')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code99885"> <?php <br /> /* <br> @@ 필요한 기능을 사용하기 위한 function.php를 포함합니다. <br> */ <br> include('functions.php'); <br> <br> /* <br> @@ 모든 업로드 작업을 수행하는 파일 업로드 클래스입니다. <br> */ <br> include('class.upload.php'); <br> <br> if(isset($_FILES["file"])) { <br> /* <br> @@ 사진의 고유한 이름을 생성합니다. <br> */ <br> $시간 = 시간(); <br> $rand_1 = 랜드(999, 999999); <br> $rand_2 = 랜드(999999, 999999999); <br> $rand_3 = 랜드(); <br> $unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3; <br> <br> /* <br> @@ 매일매일 폴더를 생성합니다. 이는 수백만 개의 이미지에서도 성능을 보장합니다. <br> */ <br> $folder = 날짜('zY'); <br> if(substr($folder, 0) == 0) { <br> $folder = '367'.date('Y'); <br> } <br> <br> /* <br> @@ 원본 이미지 파일이 저장되는 폴더입니다. <br> */ <br> $pfolder = '../업로드/소스/'; <br> if(!is_dir($pfolder)) { <br> mkdir($pfolder, 0755); <br> } <br> <br> /* <br> @@ 120x120 크기의 이미지 파일을 저장하는 폴더입니다. <br> */ <br> $tfolder = '../업로드/소형/'; <br> if(!is_dir($tfolder)) { <br> mkdir($tfolder, 0755); <br> } <br> <br> /* <br> @@ 모든 처리를 위해 업로드 파일을 업로드 클래스에 할당합니다. <br> */ <br> $handle = new Upload($_FILES["file"]); <br> if($handle->uploaded) { <br> $extension = $handle->file_src_name_ext; <br> $mime = $handle->file_src_mime; <br> <br> if(($mime == '이미지/gif') || ($mime == '이미지/jpg') || ($mime == '이미지/png') || ($mime == '이미지/bmp ') || ($mime == '이미지/pjpeg') | ($mime == '이미지/jpeg')) { <br> /* <br> @@ 업로드한 파일 형식이 이미지인지 확인하세요. <br> */ <br> if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension = = 'bmp') || ($extension == 'pjpeg')) { <br> if($handle->image_src_x > 500) { <br> /* <br> @@ 파일 크기가 10MB보다 작은지 확인하세요. 10MB = 10485760바이트. <br> */ <br> if($handle->file_src_size < 10485760) { <br /> /* <br /> @@ 실제 파일 이름(확장자 포함 및 제외)을 가져오고 데이터베이스에 삽입하기 위해 이를 정리합니다. <br /> */ <br /> $real_name = clean_input($handle->file_src_name); <br> $body_name = clean_input($handle->file_src_name_body); <br> <br> $handle->file_new_name_body = $unique_value.'_'.$body_name; <br> $핸들->프로세스($pfolder); <br> <br> $handle->image_resize = true; <br> $handle->image_ratio_crop = 'T'; <br> $핸들->image_y = 120; <br> $핸들->image_x = 120; <br> $handle->file_new_name_body = $unique_value.'_'.$body_name; <br> $핸들->프로세스($tfolder); <br> <br> if($handle->processed) { <br> $actual_name = $handle->file_dst_name; <br> $size = ceil($handle->file_src_size / 1024); <br> <br> ## 사진 세부정보를 업로더에게 다시 보내는 중입니다. <br> $date = 날짜("c", $time); <br> <br> ## Reducing the length of real name if it exceeds 50 characters. <br> if(strlen($real_name) > 50) { <br> $real_name = substr($real_name, 0, 50).'..'; <br> } <br> echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name; <br> } else { <br> echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>There was an error uploading the photo.</div>'; <br> } <br> } else { <br> echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>The photo is bigger than the allowed upload size of <strong>10MB</strong>.</div>'; <br> } <br> } else { <br> echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>You are trying to upload a photo with smaller dimensions.</div>'; <br> } <br> } else { <br> echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>'; <br> } <br> } else { <br> echo 'error,<div class="alert Alert-error"><strong>업로드 오류</strong><br/>사진 업로드만 허용됩니다.</div>'; <br> } <br> } else { <br> echo 'error,<div class="alert Alert-error"><strong>업로드 오류</strong><br/>업로드 오류가 발생했습니다.</div>'; <br> } <br> /* <br> @@ json 응답을 스크립트에 반환합니다. <br> */ <br> $핸들->Clean(); <br> } else { <br> echo 'error,<div class="alert Alert-error"><strong>업로드 오류</strong><br/>업로드 오류가 발생했습니다.</div>'; <br> }</div> <p>希望本文所述对大家的PHP jQuery程序设计有所帮助。</p> </div>