jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件

完整实例代码点击此处。

效果图如下：

实现代码如下：

JavaScript代码如下：

代码如下:

$(".side-pane").niceScroll({
cursorwidth: "8px",
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: '

<div class="start-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',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 + '