本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件
完整实例代码点击此处本站下载。
效果图如下:
实现代码如下:
JavaScript代码如下:
<script type=\"text/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();
});
</script>
javascript代码如下:
<script type=\"text/javascript\">
// <![CDATA[
$(\'#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: \'<center><div class=\"start-message\">Upload in Progress</div></center>\',
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(
\'<div id=\"\' + file.id + \'\" class=\"filecontainer\">\' +
\'<div class=\"filename\"> \'+file.name + \'</div>\'+
\'<div class=\"filesize\">\' + plupload.formatSize(file.size) + \'</div>\'+
\'<div class=\"filestatus\" id=\"status_\'+file.id+\'\">0%</div>\'+
\'<div class=\"filedel\"><a id=\"remove_\'+file.id+\'\" href=\"javascript:;\"><img src=\"img/uploader/delete.gif\" /></a></div>\' +
\'</div>\');
$(\'#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 = \'<div class=\"padding-10 hm-photo clearfix\"><a href=\"../upload/source/\'+details[4]+\'\" target=\"_blank\"><img src=\"../upload/small/\'+details[4]+\'\"></a><p class=\"small-text light-text\">\'+details[1]+\'</p><abbr class=\"time small-text\" title=\"\'+details[2]+\'\"></abbr></div>\';
input.val(input.val() + details[1] + \":\");
} else {
var photo_html = \'<div class=\"clearfix\">\'+details[1]+\'</div>\';
}
$(\'.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(\'<div style=\"margin-top: 180px; text-align: center;\"><strong>ok</strong><br/>All photos have been uploaded.</div>\');
}
});
});
// ]]>
</script>
上面2个js都放在index.php里面
XML/HTML代码如下:
<div id=\"uploader\" class=\"main-pane\">
<div id=\"filelist_header\" class=\"clearfix\">
<div class=\"filename\">Name</div>
<div class=\"filesize\">Size</div>
<div class=\"filestatus\">Status</div>
<div class=\"filedel\"></div>
<div></div>
</div>
<div id=\"filelist\"></div>
<div class=\"action-btns\">
<a id=\"pickfiles\" class=\"login-button btn\">Select files to upload</a>
<a href=\"javascript:;\" id=\"upload_button\" class=\"login-button upload hide\">Upload</a>
</div>
<center>
<div id=\"upload_info\">
<div id=\"upload_info_inner\">
<div class=\"progressbg\">
<div id=\"percent\" class=\"progress\"></div>
</div>
</div>
<div id=\"unknown\">
<div id=\"time2go\"></div>
<div id=\"upRate\"></div>
</div>
</div>
</center>
<form method=\"POST\" action=\"process.php\" id=\"processupload\">
<input type=\"hidden\" name=\"uploaded_photos\" id=\"uploaded_photos\" />
<input type=\"hidden\" name=\"fkey\" value=\"<?php echo $fkey; ?>\" />
</form>
</div>
upload.php页面代码如下:
<?php
/*
@@ Including the functions.php for using the necessary functions.
*/
include(\'functions.php\');
/*
@@ This is the file upload class which does all the uploading work.
*/
include(\'class.upload.php\');
if(isset($_FILES[\"file\"])) {
/*
@@ Generating unique name for the photo.
*/
$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 creation for each and every day. This ensures performance even with millions of images.
*/
$folder = date(\'zY\');
if(substr($folder, 0) == 0) {
$folder = \'367\'.date(\'Y\');
}
/*
@@ This folder is for the source image files.
*/
$pfolder = \'../upload/source/\';
if(!is_dir($pfolder)) {
mkdir($pfolder, 0755);
}
/*
@@ This folder is for the image files with 120x120 dimensions.
*/
$tfolder = \'../upload/small/\';
if(!is_dir($tfolder)) {
mkdir($tfolder, 0755);
}
/*
@@ Assigning the upload file to the upload class for all the processing.
*/
$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\')) {
/*
@@ Check if the uploaded filetype is an image or not.
*/
if(($extension == \'gif\') || ($extension == \'jpg\') || ($extension == \'jpeg\') || ($extension == \'png\') || ($extension == \'bmp\') || ($extension == \'pjpeg\')) {
if($handle->image_src_x > 500) {
/*
@@ Check if the filesize is smaller than 10 MB. 10 MB = 10485760 bytes.
*/
if($handle->file_src_size < 10485760) {
/*
@@ Getting the actual file name (with and without extension) and sanitizing it for inserting in the database.
*/
$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,<div class=\"alert alert-error\"><strong>Upload Error</strong><br/>There was an error uploading the photo.</div>\';
}
} else {
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>\';
}
} else {
echo \'error,<div class=\"alert alert-error\"><strong>Upload Error</strong><br/>You are trying to upload a photo with smaller dimensions.</div>\';
}
} else {
echo \'error,<div class=\"alert alert-error\"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>\';
}
} else {
echo \'error,<div class=\"alert alert-error\"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>\';
}
} else {
echo \'error,<div class=\"alert alert-error\"><strong>Upload Error</strong><br/>An upload error occured.</div>\';
}
/*
@@ Return the json response to the script.
*/
$handle->Clean();
} else {
echo \'error,<div class=\"alert alert-error\"><strong>Upload Error</strong><br/>An upload error occured.</div>\';
}
希望本文所述对大家的PHP+jQuery程序设计有所帮助。