jquery php ajax는 여러 이미지 업로드의 업로드 진행 상황을 표시하고 썸네일 code_php 기술을 생성합니다.

이 예에서는 CSS, js 및 img 파일뿐만 아니라 다른 두 개의 PHP class.upload.php 및 function.php를 사용합니다

전체 예제 코드를 보려면 여기를 클릭하세요 이 사이트에서 다운로드하세요 .

렌더링은 다음과 같습니다.

구현 코드는 다음과 같습니다.

자바스크립트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. $(문서).ready(함수() { $("#filelist").niceScroll({ 커서 너비: "8px", 커서순서 반경: "0px", cursoropacitymin: 0.1, Cursoropacitymax: 0.3 })

$(".side-pane").niceScroll({ 커서 너비: "8px", 커서순서 반경: "0px", cursoropacitymin: 0.1, Cursoropacitymax: 0.3 })

$(".time").timeago() })

자바스크립트 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. // $('#upload_button').click(function() { $('.side-pane').html(''); $('#upload_button').hide(); $('#pickfiles').hide(); $('#upload_info').show(); $('#upload_info').css("display","inherit"); uploader.start(); $('#filelist').block({ message: ' Upload in Progress ', css: { border: 'none', backgroundColor: 'none' }, overlayCSS: { backgroundColor: '#fff', opacity: '0', cursor: 'wait' } }); }); var uploader = new plupload.Uploader({ runtimes : 'flash, html5', browse_button : 'pickfiles', container : 'uploader', max_file_size : '10mb', url : 'upload.php', flash_swf_url : 'uploader/uploader.swf', filters : [ { title : "Image files", extensions : "jpg,jpeg,gif,png" } ] }); uploader.bind('Init', function(up, params) {}); uploader.init(); uploader.bind('FilesAdded', function(up, files) { /* @@ Show / hide various elements */ $('.upload-message').hide(); $('.info-message').hide(); $('#upload_button').show(); $('#filelist_header').show(); $.each(files, function(i, file) { $('#filelist').append( ' ' + ' '+file.name + ' '+ ' ' + plupload.formatSize(file.size) + ' '+ ' 0% '+ ' ' + ' '); $('#remove_' file.id).click(function(e) { Uploader.removeFile(파일) $('#' file.id).hide('slow', function() { ('#' file.id).remove(); }); }); }); up.새로고침(); $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500); }); uploader.bind('UploadProgress', function(up, file) { $('#status_' file.id).html(file.percent "%"); if(file.percent == 100) { $('#' 파일.id).block({ 메시지: '', CSS: { 테두리: '없음', 배경색상: '없음' }, 오버레이CSS: { 배경색상: '#fff', 불투명도: '0.7', 커서: '잠깐' } }); } $('#percent').width(uploader.total.percent "%"); $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024) "kb/sec"); }); uploader.bind('FileUploaded', function(up, file, response) { var 입력 = $("#uploaded_photos"); var 데이터 = response.response; var 세부사항 = data.split(','); if(details[0] == '성공') { var photo_html = ' ' 세부정보[1] '

'; input.val(input.val() 세부정보[1] ":"); } 다른 { var photo_html = ' ' 세부정보[1] ' '; } $('.side-pane').prepend(photo_html); $('.time').timeago(); }); uploader.bind('UploadComplete', function(up, files) { $('#upload_info').hide(); $('#filelist').차단 해제({ onUnblock: 함수 () { $('#filelist_header').hide(); $('#filelist').html(' 확인 모든 사진에는 업로드되었습니다. '); } }); }); // ]]> 상면2个jsDU放在index.php里면

XML/HTML代码如下：

复代码 代码如下: 이름 크기 상태 업로드할 파일 선택 업로드 " /> upload.php 페이지 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. /* @@ 필요한 기능을 사용하기 위한 function.php를 포함합니다. */ include('functions.php'); /* @@ 모든 업로드 작업을 수행하는 파일 업로드 클래스입니다. */ include('class.upload.php'); if(isset($_FILES["file"])) { /* @@ 사진의 고유한 이름을 생성합니다. */ $시간 = 시간(); $rand_1 = 랜드(999, 999999); $rand_2 = 랜드(999999, 999999999); $rand_3 = 랜드(); $unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3; /* @@ 매일매일 폴더를 생성합니다. 이는 수백만 개의 이미지에서도 성능을 보장합니다. */ $folder = 날짜('zY'); if(substr($folder, 0) == 0) { $folder = '367'.date('Y'); } /* @@ 원본 이미지 파일이 저장되는 폴더입니다. */ $pfolder = '../업로드/소스/'; if(!is_dir($pfolder)) { mkdir($pfolder, 0755); } /* @@ 120x120 크기의 이미지 파일을 저장하는 폴더입니다. */ $tfolder = '../업로드/소형/'; if(!is_dir($tfolder)) { mkdir($tfolder, 0755); } /* @@ 모든 처리를 위해 업로드 파일을 업로드 클래스에 할당합니다. */ $handle = new Upload($_FILES["file"]); if($handle->uploaded) { $extension = $handle->file_src_name_ext; $mime = $handle->file_src_mime; if(($mime == '이미지/gif') || ($mime == '이미지/jpg') || ($mime == '이미지/png') || ($mime == '이미지/bmp ') || ($mime == '이미지/pjpeg') | ($mime == '이미지/jpeg')) { /* @@ 업로드한 파일 형식이 이미지인지 확인하세요. */ if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension = = 'bmp') || ($extension == 'pjpeg')) { if($handle->image_src_x > 500) { /* @@ 파일 크기가 10MB보다 작은지 확인하세요. 10MB = 10485760바이트. */ if($handle->file_src_size /* @@ 실제 파일 이름(확장자 포함 및 제외)을 가져오고 데이터베이스에 삽입하기 위해 이를 정리합니다. */ $real_name = clean_input($handle->file_src_name); $body_name = clean_input($handle->file_src_name_body); $handle->file_new_name_body = $unique_value.'_'.$body_name; $핸들->프로세스($pfolder); $handle->image_resize = true; $handle->image_ratio_crop = 'T'; $핸들->image_y = 120; $핸들->image_x = 120; $handle->file_new_name_body = $unique_value.'_'.$body_name; $핸들->프로세스($tfolder); if($handle->processed) { $actual_name = $handle->file_dst_name; $size = ceil($handle->file_src_size / 1024); ## 사진 세부정보를 업로더에게 다시 보내는 중입니다. $date = 날짜("c", $time); ## Reducing the length of real name if it exceeds 50 characters. if(strlen($real_name) > 50) { $real_name = substr($real_name, 0, 50).'..'; } echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name; } else { echo 'error, Upload Error There was an error uploading the photo. '; } } else { echo 'error, Upload Error The photo is bigger than the allowed upload size of 10MB . '; } } else { echo 'error, Upload Error You are trying to upload a photo with smaller dimensions. '; } } else { echo 'error, Upload Error Only photo uploads are allowed. '; } } else { echo 'error, 업로드 오류 사진 업로드만 허용됩니다. '; } } else { echo 'error, 업로드 오류 업로드 오류가 발생했습니다. '; } /* @@ json 응답을 스크립트에 반환합니다. */ $핸들->Clean(); } else { echo 'error, 업로드 오류 업로드 오류가 발생했습니다. '; } 希望本文所述对大家的PHP jQuery程序设计有所帮助。