大佬教程收集整理的这篇文章主要介绍了jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
本例用到其他2个php clasS.Upload.php和 functions.php还有css和js以及img文件@H_874_1@
完整实例代码点击此处。
效果图如下：
实现代码如下：
JavaScript代码如下：
$(".side-pane").niceScroll({
cursorwidth: "8px",
cursoropacitymax: 0.3
}); @H_874_1@
javascript代码如下：@H_874_1@
$('#filelist').block({
message: '
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" }
]
}); @H_874_1@
uploader.bind('Init',function(up,params) {});
uploader.init(); @H_874_1@
uploader.bind('FilesAdded',files) {
/
@@ Show / hide various elements
/
$('.upload-message').hide();
$('.info-message').hide();
$('#upload_button').show();
$('#filelist_header').show(); @H_874_1@
$.each(files,function(i,filE) {
$('#filelist').append(
'<div id="' + file.id + '" class="filecontainer">' +
'<div class="filename"> '+file.name + '
$('#remove_'+file.id).click(function(E) {
uploader.removeFile(filE)
$('#'+file.id).hide('slow',function() { ('#'+file.id).remove(); });
});
}); @H_874_1@
up.refresh();
$('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")},1500);
}); @H_874_1@
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.@R_655_10586@l.percent+"%");
$('#upRate').text(Math.ceil(uploader.@R_655_10586@l.bytesPerSec/1024)+" kb/sec");
}); @H_874_1@
uploader.bind('FileUploaded',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]+'"><p class="small-text light-text">'+details[1]+'@H_874_1@<abbr class="time small-text" title="'+details[2]+'">';
input.val(input.val() + details[1] + ":");
} else {
var photo_html = '<div class="clearfix">'+details[1]+'';
}
$('.side-pane').prepend(photo_html);
$('.time').timeago();
}); @H_874_1@
uploader.bind('UploadComplete',files) {
$('#upload_info').hide();
$('#filelist').unblock({
onUnblock: function () {
$('#filelist_header').hide();
$('#filelist').html('<div style="margin-top: 180px; text-align: center;">
XML/HTML代码如下：
<div id="filelist">
<div class="action-btns">
<a id="pickfiles" class="login-button btn">SELEct files to upload
<a href="javascript:;" id="upload_button" class="login-button upload hide">Upload @H_874_1@
<div id="unknown">
<div id="time2go">
<div id="upRate"> @H_874_1@
<form method="POST" action="process.php" id="processupload"> @H_874_1@ @H_874_1@
/
@@ This is the file upload class which does all the uploading work.
/
include('clasS.Upload.php'); @H_874_1@
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();
$uniquevalue = $time.''.$rand1.''.$rand2.''.$rand_3; @H_874_1@
/
@@ 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');
} @H_874_1@
/
@@ This folder is for the source image files.
/
$pfolder = '../upload/source/';
if(!is_dir($pfolder)) {
mkdir($pfolder,0755);
} @H_874_1@
/
@@ This folder is for the image files with 120x120 dimensions.
/
$tfolder = '../upload/small/';
if(!is_dir($tfolder)) {
mkdir($tfolder,0755);
} @H_874_1@
/
@@ 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; @H_874_1@
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); @H_874_1@
$handle->file_new_name_body = $uniquevalue.''.$body_name;
$handle->Process($pfolder); @H_874_1@
$handle->image_resize = true;
$handle->image_ratio_crop = 'T';
$handle->image_y = 120;
$handle->image_x = 120;
$handle->file_new_name_body = $uniquevalue.''.$body_name;
$handle->Process($tfolder); @H_874_1@
if($handle->processed) {
$actual_name = $handle->file_dst_name;
$size = ceil($handle->file_src_size / 1024); @H_874_1@
$date = date("c",$timE); @H_874_1@
if(strlen($real_Name) > 50) {
$real_name = substr($real_name,50).'..';
}
echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name;
} else {
echo 'error,<div class="alert alert-error">
希望本文所述对大家的php+jQuery程序设计有所帮助。@H_874_1@
以上是大佬教程为你收集整理的jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码全部内容，希望文章能够帮你解决jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。