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

本例用到其他2个PHP class.upload.php和functions.php还有钢性铸铁和射流研究…以及img文件

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

效果图如下：

实现代码如下：

Java脚本语言代码如下：复制代码代码如下：脚本类型=' text/JavaScript ' $(文档)。ready(function() { $('#filelist ')).nices roll({ cursorwith : ' 8px '，cursorborderradius: ' 0px '，cursoropacitymin: 0.1，cursoropacitymax : 0.3 })；$('.侧窗格')。nices roll({ cursorwith : ' 8px '，cursorborderradius: ' 0px '，cursoropacitymin: 0.1，cursoropacitymax : 0.3 })；$('.时间')。timeago()；});/script

爪哇岛描述语言代码如下：

复制代码代码如下：脚本类型=' text/JavaScript '//！[CData[$(“# upload _ button”).单击(函数(){ $(').侧窗格')。html(" ")；$(“# upload _ button”).hide()；$('#pickfiles ').hide()；$(“# upload _ info”).show()；$(“# upload _ info”).css('display '，' inherit ')；上传者。start()；$('#filelist ').block({ message : ' center div class=' start-message ' upload in Progress/div/center '，css: { border: 'none '，backgroundColor: 'none' }，overlay ycss : { background color : ' # fff '，opacity: ' 0 '，光标： ' wait ' })；});var uploader=new plupload .上传程序({ runtimes : ' flash，html5 '，browse_button : 'pickfiles '，container : 'uploader '，max_file_size : '10mb '，URL : ' upload.php '，flash _ swf _ URL : ' uploader/uploader。' swf '，筛选器： [ { title : '图像文件'，扩展名： 'jpg，jpeg，gif，png' } ])上传程序. bind('Init '，函数(up，params){ })；上传者。init()；上传者。bind(' filestadded '，function(up，files) { /* @@显示/隐藏各种元素*/$()。上传-消息')。hide()；$('.信息-消息')。hide()；$(“# upload _ button”).show()；$('#filelist_header ').show()；$.每个（文件，函数(I，file) { $('#filelist ')).追加(' div id='文件。id ' ' class='文件容器' ' ' div class='文件名' '文件。name/' div ' ' div class='文件大小' ' plupload。formatsize(文件。size)'/div ' ' div class=' filestatus '文件。id为“0%/div”的div class=“file del”a id=“remove _”文件。id为“href=”的JavaScript :img src=' http : img/上传者/删除。gif '/a/div ' '/div ')；$(“# remove _”文件。id ).单击（函数{上传者。删除文件($)(' # '文件。id ).hide('slow '，function() { ('#' file.id).移除();});});});起来。刷新()；$('#filelist ').动画({scrollTop: $('#filelist ')).attr('scrollHeight')}，1500)；});uploader.bind('UploadProgress '，函数(up，file){ $(“# status _”file . id).html(文件。百分比“%”；if(文件。percent==100){ $("# "文件。id ).block({ message: ' '，css: { border: 'none '，backgroundColor: 'none' }，overlay ycss : { background color : ' # fff '，opacity: ' 0.7 '，游标： ' wait ' })；} $('#percent ').宽度(上传者。总计。百分比“%”；$('#upRate ').文字(数学。天花板(上传器。总计。bytespersec/1024)' kb/秒');});uploader.bind('FileUploaded '，函数(up，file，response){ var input=$(' # uploaded _ photos ')；定义变量数据=response . response var details=data . split('，')；if(details[0]==' success '){ var photo _ html=' div class=' padding-10hm-photo clear fix ' a href='./upload/source/' details[4]' ' target=' _ blank ' img src=' http :/upload/small/input . val(input . val())详细信息[1]":');} else { var photo _ html=' div class=' clear fix ' ' details[1]'/div '；} $('.侧窗格')。prepend(photo _ html)；$('.时间')。timeago()；});uploader.bind('UploadComplete '，函数(up，files) { $('#upload_info ').hide()；$('#filelist ').解除阻止({ onunblock : function(){ $(' # file list _ header ')).hide()；$('#filelist ').html(' div style=' margin-top : 180 px；文本对齐：中心；强烈的确定/strong br/所有照片均已上传/div ')；} });});//]]/脚本

上面2个射流研究…都放在index.php里面

XML/HTML代码如下：复制代码代码如下： div id=' uploader ' class=' main-pane ' div id=' filelist _ header ' class=' clearfix ' div class=' filename ' name/div class=' filesize ' size/div class=' filestate ' state/div class=' filedel '/div/div/div id=' filelist '/div class=' action-btns ' a id=' pick files ' class=' log in-button BTN '选择要上传的文件/a href=' JavaScriptid=' upload _ button ' class=' log in-button upload hide ' upload/a/div center div id=' upload _ info ' div id=' upload _ info _ inner ' div class=' progress BG ' div id=' percent ' class=' progress '/div/div/div id=' unknown ' div id=' time 2 go '/div div id=' upRate '/div/div/center form method=' POST ' action=' process。 PHP ' id='进程上传'输入类型='hidden' name='php echo $ fkey？//表单/div

upload.php页面代码如下：

复制代码代码如下：php /* @@包括使用必要函数的functions.php .*/include('函数。PHP’)；/* @@这是做所有上传工作的文件上传类*/include(' class。上传。PHP’)；if(isset($ _ FILES[' file ']){/* @ @为照片生成唯一的名称*/$ time=time()；$rand_1=兰特(999，999999)；$rand_2=rand(999999，999999999)；$rand_3=兰德();$unique_value=$time .'_'.$兰特_1。'_'.$兰特_2。'_'.$ rand _ 3；/* @@每天创建文件夹。即使有数百万张图像，这也能确保性能*/$ folder=date(' Zy ')；if(substr($folder，0)=0){ $ folder=' 367 ' .日期(' Y ')；} /* @@此文件夹用于源图像文件*/$pfolder='./upload/source/'；if(！is _ dir($ pfo LD)){ mkdir($ pfo LD，0755)；} /* @@此文件夹用于120x120尺寸的图像文件*/$tfolder='./upload/small/'；if(！is _ dir($ tfold)){ mkdir($ tfold，0755)；} /* @@将上传文件分配给上传类进行所有处理*/$ handle=new Upload($ _ FILES[' file '])；if($ handle-上传){ $扩展名=$ 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/pjpg ')|($ mime==' image/JPEG ')){/* @ @检查上传的文件类型是否为图像*/if(($ extension==' gif ')| |($ extension==' jpg ')|($ extension==' JPEG ')| |($ extension==' png ')|($ extension==' BMP ')|($ extension==' pj peg ')))){ if($ handle-image _ src _ x 500){/* @ @检查文件大小是否小于10兆字节.10 MB=10485760字节*/if($ handle-file _ src _ size 10485760){/* @ @获取实际文件名（带扩展名和不带扩展名),并对其进行消毒以插入数据库*/$ 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$句柄-Process($ tfolder)；if($ handle-progress){ $ actual _ name=$ handle-file _ dst _ name；$ size=ceil($ handle-file _ src _ size/1024)；##将照片细节发送回上传者$date=date('c '，$ time)；##如果实名长度超过50个字符，则缩短实名长度if(strlen($ real _ name)50){ $ real _ name=substr($ real _ name，0，50).'.'；}附和"成功"。$实名。','.$日期。','.$文件夹。','.$ actual _ name} else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/上传照片时出错“/div”；} } else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/照片大于允许的上传大小strong10MB/strong ./div '；} } else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/您正在尝试上传较小尺寸的照片“/div”；} } else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/仅允许上传照片“/div”；} } else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/仅允许上传照片“/div”；} } else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/出现上传错误“/div”；} /* @@将json响应返回给脚本*/$ handle-Clean()；} else { echo '错误，div class='警报警报-错误' strong上传错误/strong br/出现上传错误“/div”；}

希望本文所述对大家的PHP jQuery程序设计有所帮助。