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

本例用到其他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>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',
                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
                */
                $('.upload-message').hide();
                $('.info-message').hide();
                $('#upload_button').show();
                $('#filelist_header').show();
 
                $.each(files, function(i, file) {
                    $('#filelist').append(
                        '<div>' +
                        '<div> '+file.name + '</div>'+
                        '<div>' + plupload.formatSize(file.size) + '</div>'+
                        '<div>0%</div>'+
                        '<div><a href="javascript:;"><img src="https://www.jb51.net/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.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 = '<div><a href="../upload/source/'+details[4]+'" target="_blank"><img src="../upload/small/'+details[4]+'"></a><p>'+details[1]+'</p><abbr title="'+details[2]+'"></abbr></div>';
                        input.val(input.val() + details[1] + ":");
                    } else {
                        var photo_html = '<div>'+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><strong>ok</strong><br/>All photos have been uploaded.</div>');
                    }
                });
            });
 
        // ]]> 
        </script>

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

XML/HTML代码如下：

复制代码 代码如下: