php上传多图片即时显示,PHP+jQuery+Ajax实现多图片上传显示上传进度并生成缩略图代码示例（附代码下载）...-CSDN博客

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

完整实例代码点击此处

效果图如下：

实现代码如下：

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();

});

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', function(up, files) {

@@ Show / hide various elements @camnpr.com

$('.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) + '

' +

');

$('#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 = '

'+details[1]+'

input.val(input.val() + details[1] + ":");

} else {

var photo_html = '

'+details[1]+'

}

$('.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('

ok
All photos have been uploaded.

');

}

});

// ]]>

上面2个js都放在index.php里面

XML/HTML代码如下：

代码如下:

Name

Size

Status

Select files to upload

Upload

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;