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

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

完整实例代码点击此处本站下载。

效果图如下：

实现代码如下：

JavaScript代码如下：

<script type="text/javascript">  <br />$(document).ready(function() {  <br />    $("#filelist").niceScroll({  <br />        cursorwidth: "8px",  <br />        cursorborderradius: "0px",  <br />        cursoropacitymin: 0.1,  <br />        cursoropacitymax: 0.3  <br />    });  <br />  <br />    $(".side-pane").niceScroll({  <br />        cursorwidth: "8px",  <br />        cursorborderradius: "0px",  <br />        cursoropacitymin: 0.1,  <br />        cursoropacitymax: 0.3  <br />    });  <br />  <br />    $(".time").timeago();  <br />});  <br /></script>

javascript代码如下：

<script type="text/javascript">  <br />        // <![CDATA[ <br /> <br />            $('#upload_button').click(function() { <br />                $('.side-pane').html(''); <br />                $('#upload_button').hide(); <br />                $('#pickfiles').hide(); <br />                $('#upload_info').show(); <br />                $('#upload_info').css("display","inherit"); <br />                uploader.start(); <br /> <br />                $('#filelist').block({ <br />                    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/uplo

搞gaodaima代码ader.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(
‘

‘);

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

‘;
input.val(input.val() + details[1] + “:”);
} else {
var photo_html = ‘

‘;
}
$(‘.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(‘

‘);
}
});
});

// ]]>
</script>