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

更新时间:2023-04-06 21:11:00 阅读：评论：0

本例用到其他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’,

brow_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.bytesperc/1024)+” kb/c”);

});

uploader.bind(‘fileuploaded’, function(up, file, respon) {

var input = $(“#uploaded_photos”);

var data = respon.respon;

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] + “:”);

} el {

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”>lect files to upload</a>

<a h夏日痴魂ref=”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(ist($_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 120×120 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 inrting in the databa.

*/

$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->procesd) {

$actual_name = $handle->file_dst_name;

$size = ceil($handle->file_src_size / 1024);

## nding 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;

} el {

echo ‘error,<div class=”alert alert-error”><strong>upload error</strong><br/>there was an error uploading the photo.</div>’;

}

} el {

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>’;

}

} el {

echo ‘error,<div class=”alertud alert-error”><strong>upload error</strong><br/>you are trying to upload a photo with smaller dimensions.</div>’;

}

} el {

echo ‘error,<div class=”alert alert-error”><strong>upload error</strong><br/>only photo uploads are allowed.</div>’;

}

} el {

echo ‘error,<div class=”alert alert-error”><strong>upload error</strong><br/>only photo uploads are allowed.</div>’;

}

} el {

echo ‘error,<div c民航招飞系统lass=”alert alert-error”><strong>upload error</strong><br/>an upload error occured.</div>’;

}

/*

@@ return the json respon to the script.

*/

$handle->clean();

} el {

echo ‘error,<div class=”alert alert-error”><strong>upload error<一个萝卜一个坑;/strong><br/>an upload error occured.</div>’;

}