本例用到其他2個php class.upload.php和 functions.php還有css和js以及img檔案
完整執行個體代碼點選此處本站下載下傳。
效果圖如下：
實作代碼如下：
JavaScript代碼如下：
$(document).ready(function() {
$("#filelist").niceScroll({
cursorwidth: "8px",
cursorborderradius: "0px",
cursoropacitymin: 0.1,
cursoropacitymax: 0.3
});
$(".side-pane").niceScroll({
cursorwidth: "8px",
cursorborderradius: "0px",
cursoropacitymin: 0.1,
cursoropacitymax: 0.3
});
$(".time").timeago();
});
javascript代碼如下：
//
$(‘#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) {
$(‘.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)
$(‘#‘+file.id).hide(‘slow‘, function() { (‘#‘+file.id).remove(); });
});
});
up.refresh();
$(‘#filelist‘).animate({scrollTop: $(‘#filelist‘).attr("scrollHeight")}, 1500);
});
uploader.bind(‘UploadProgress‘, function(up, file) {
$(‘#status_‘ + file.id).html(file.percent + "%");
if(file.percent == 100) {
$(‘#‘ + file.id).block({
message: ‘‘,
css: {
border: ‘none‘,
backgroundColor: ‘none‘
},
overlayCSS: {
backgroundColor: ‘#fff‘,
opacity: ‘0.7‘,
cursor: ‘wait‘
}
});
}
$(‘#percent‘).width(uploader.total.percent+"%");
$(‘#upRate‘).text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec");
});
uploader.bind(‘FileUploaded‘, function(up, file, response) {
var input = $("#uploaded_photos");
var data = response.response;
var details = data.split(‘,‘);
if(details[0] == ‘success‘) {
var photo_html = ‘
‘+details[1]+‘
‘;
input.val(input.val() + details[1] + ":");
} else {
var photo_html = ‘
‘+details[1]+‘ ‘;
}
$(‘.side-pane‘).prepend(photo_html);
$(‘.time‘).timeago();
});
uploader.bind(‘UploadComplete‘, function(up, files) {
$(‘#upload_info‘).hide();
$(‘#filelist‘).unblock({
onUnblock: function () {
$(‘#filelist_header‘).hide();
$(‘#filelist‘).html(‘
ok
All photos have been uploaded. ‘);
}
});
});
// ]]>
上面2個js都放在index.php裡面
XML/HTML代碼如下：
Name Size Status
Select files to upload
Upload
upload.php頁面代碼如下：
include(‘functions.php‘);
include(‘class.upload.php‘);
if(isset($_FILES["file"])) {
$time = time();
$rand_1 = rand(999, 999999);
$rand_2 = rand(999999, 999999999);
$rand_3 = rand();
$unique_value = $time.‘_‘.$rand_1.‘_‘.$rand_2.‘_‘.$rand_3;
$folder = date(‘zY‘);
if(substr($folder, 0) == 0) {
$folder = ‘367‘.date(‘Y‘);
}
$pfolder = ‘../upload/source/‘;
if(!is_dir($pfolder)) {
mkdir($pfolder, 0755);
}
$tfolder = ‘../upload/small/‘;
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 == ‘image/gif‘) || ($mime == ‘image/jpg‘) || ($mime == ‘image/png‘) || ($mime == ‘image/bmp‘) || ($mime == ‘image/pjpeg‘) | ($mime == ‘image/jpeg‘)) {
if(($extension == ‘gif‘) || ($extension == ‘jpg‘) || ($extension == ‘jpeg‘) || ($extension == ‘png‘) || ($extension == ‘bmp‘) || ($extension == ‘pjpeg‘)) {
if($handle->image_src_x > 500) {
if($handle->file_src_size < 10485760) {
$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;
$handle->Process($pfolder);
$handle->image_resize = true;
$handle->image_ratio_crop = ‘T‘;
$handle->image_y = 120;
$handle->image_x = 120;
$handle->file_new_name_body = $unique_value.‘_‘.$body_name;
$handle->Process($tfolder);
if($handle->processed) {
$actual_name = $handle->file_dst_name;
$size = ceil($handle->file_src_size / 1024);
## Sending photo details back to the uploader.
$date = 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,
Upload Error
Only photo uploads are allowed. ‘;
}
} else {
echo ‘error,
Upload Error
An upload error occured. ‘;
}
$handle->Clean();
} else {
echo ‘error,
Upload Error
An upload error occured. ‘;
}
希望本文所述對大家的PHP+jQuery程式設計有所幫助。
原文：http://www.jb51.net/article/56304.htm