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

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

2018-12-30

搜索热词

本例用到其他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: '

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(

'

' +

'

'+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',file) {

$('#status_' + file.id).html(file.percent + "%");

if(file.percent == 100) {

$('#' + file.id).block({

message: '',

opacity: '0.7',

cursor: 'wait'

}

});

}

$('#percent').width(uploader.total.percent+"%");

$('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec");

});

uploader.bind('FileUploaded',file,response) {

var input = $("#uploaded_photos");

var data = response.response;

var details = data.split(',');

if(details[0] == 'success') {

var photo_html = '