jquery php多资料上传-tutoriel php-php.cn

jquery php多资料上传
WBOY
Libérer： 2016-06-13 11:36:40
original
1200 Les gens l'ont consulté
jquery php多文件上传
多文件上传
演示
index.php
PHP Code

"uploaderform">??

"upload.php"?method="post"?enctype="multipart/form-data"?name="UploadForm"?id="UploadForm">??
????jquery?php多文件上传(本例限制为3个文件)???
????文件??
????class="small">"#"?id="AddMoreFileBox">添加上传框??
??????
????"AddFileInputBox">"fileInputBox"?style="margin-bottom:?5px;"?type="file"??name="file[]"/>
??
????class="sep_s">
??
??????
????介绍??
?????
??????
????
"username"?type="text"?id="username"?value="freejs.net"?/>
??
??????
?????

?????class="button"?id="SubmitButton">Upload??
??????
????"progressbox">
"progressbar">
?>
"statustxt">0%
?>
??
??
??
"uploadResults">??
????"center"?style="margin:20px;">"#"?id="ShowForm">打开/隐藏?表单
??
????"output">
??
??

js文件
JavaScript Code<script><span class="string" style="margin: auto; padding: 0px; color: blue;">"text/javascript"</script>>???
$(document).ready(function()?{???
//elements??
var?progressbox?????????=?$('#progressbox');?//progress?bar?wrapper??
var?progressbar?????????=?$('#progressbar');?//progress?bar?element??
var?statustxt???????????=?$('#statustxt');?//status?text?element??
var?submitbutton????????=?$("#SubmitButton");?//submit?button??
var?myform??????????????=?$("#UploadForm");?//upload?form??
var?output??????????????=?$("#output");?//ajax?result?output?element??
var?completed???????????=?'0%';?//initial?progressbar?value??
var?FileInputsHolder????=?$('#AddFileInputBox');?//Element?where?additional?file?inputs?are?appended??
var?MaxFileInputs???????=?3;?//Maximum?number?of?file?input?boxs??
??
//?adding?and?removing?file?input?box??
var?i?=?$("#AddFileInputBox?div").size()?+?1;??
$("#AddMoreFileBox").click(function?()?{??
????????event.returnValue?=?false;??
????????if(i?
????????{??
????????????$('').appendTo(FileInputsHolder);??
????????????i++;??
????????}??
????????return?false;??
});??
??
$("body").on("click",".removeclass",?function(e){??
????????event.returnValue?=?false;??
????????if(?i?>?1?)?{??
????????????????$(this).parents('span').remove();i--;??
????????}??
??????????
});???
??
$("#ShowForm").click(function?()?{??
??$("#uploaderform").slideToggle();?//Slide?Toggle?upload?form?on?click??
});??
??????
$(myform).ajaxForm({??
????beforeSend:?function()?{?//brfore?sending?form??
????????submitbutton.attr('disabled',?'');?//?disable?upload?button??
????????statustxt.empty();??
????????progressbox.show();?//show?progressbar??
????????progressbar.width(completed);?//initial?value?0%?of?progressbar??
????????statustxt.html(completed);?//set?status?text??
????????statustxt.css('color','#000');?//initial?color?of?status?text??
??????????
????},??
????uploadProgress:?function(event,?position,?total,?percentComplete)?{?//on?progress??
????????progressbar.width(percentComplete?+?'%')?//update?progressbar?percent?complete??
????????statustxt.html(percentComplete?+?'%');?//update?status?text??
????????if(percentComplete>50)??
????????????{??
????????????????statustxt.css('color','#fff');?//change?status?text?to?white?after?50%??
????????????}else{??
????????????????statustxt.css('color','#000');??
????????????}??
??????????????
????????},??
????complete:?function(response)?{?//?on?complete??
????????output.html(response.responseText);?//update?element?with?received?data??
????????myform.resetForm();??//?reset?form??
????????submitbutton.removeAttr('disabled');?//enable?submit?button??
????????progressbox.hide();?//?hide?progressbar??
????????$("#uploaderform").slideUp();?//?hide?form?after?upload??
????}??
});??
??
});???
???
?uoload.php
?
PHP Code??
"center">"index.php">Go?Back?To?Upload?Form
??
??
//If?you?face?any?errors,?increase?values?of?"post_max_size",?"upload_max_filesize"?and?"memory_limit"?as?required?in?php.ini??
??
?//Some?Settings??
$ThumbSquareSize????????=?200;?//Thumbnail?will?be?200x200??
$BigImageMaxSize????????=?500;?//Image?Maximum?height?or?width??
$ThumbPrefix????????????=?"thumb_";?//Normal?thumb?Prefix??
$DestinationDirectory???=?'../upload/';?//Upload?Directory?ends?with?/?(slash)??
$Quality????????????????=?90;??
??
//ini_set('memory_limit',?'-1');?//?maximum?memory!??
??
foreach($_FILES?as?$file)??
{??
//?some?information?about?image?we?need?later.??
$ImageName??????=?$file['name'];??
$ImageSize??????=?$file['size'];??
$TempSrc????????=?$file['tmp_name'];??
$ImageType??????=?$file['type'];??
??
??
if?(is_array($ImageName))???
{??
????$c?=?count($ImageName);??
??????
????echo??'';??
??????
????for?($i=0;?$i?$c;?$i++)??
????{??
????????$processImage???????????=?true;???
????????$RandomNumber???????????=?rand(0,?9999999999);??//?We?need?same?random?name?for?both?files.??
??????????
????????if(!isset($ImageName[$i])?||?!is_uploaded_file($TempSrc[$i]))??
????????{??
????????????echo?'Error?occurred?while?trying?to?process?'.$ImageName[$i].',?may?be?file?too?big!
';?//output?error??
????????}??
????????else??
????????{??
????????????//Validate?file?+?create?image?from?uploaded?file.??
????????????switch(strtolower($ImageType[$i]))??
????????????{??
????????????????case?'image/png':??
????????????????????$CreatedImage?=?imagecreatefrompng($TempSrc[$i]);??
????????????????????break;??
????????????????case?'image/gif':??
????????????????????$CreatedImage?=?imagecreatefromgif($TempSrc[$i]);??
????????????????????break;??
????????????????case?'image/jpeg':??
????????????????case?'image/pjpeg':??
????????????????????$CreatedImage?=?imagecreatefromjpeg($TempSrc[$i]);??
????????????????????break;??
????????????????default:??
????????????????????$processImage?=?false;?//image?format?is?not?supported!??
????????????}??
????????????//get?Image?Size??
????????????list($CurWidth,$CurHeight)=getimagesize($TempSrc[$i]);??
??
????????????//Get?file?extension?from?Image?name,?this?will?be?re-added?after?random?name??
????????????$ImageExt?=?substr($ImageName[$i],?strrpos($ImageName[$i],?'.'));??
????????????$ImageExt?=?str_replace('.','',$ImageExt);??
??????
????????????//Construct?a?new?image?name?(with?random?number?added)?for?our?new?image.??
????????????$NewImageName?=?$RandomNumber.'.'.$ImageExt;??
??
????????????//Set?the?Destination?Image?path?with?Random?Name??
????????????$thumb_DestRandImageName????=?$DestinationDirectory.$ThumbPrefix.$NewImageName;?//Thumb?name??
????????????$DestRandImageName??????????=?$DestinationDirectory.$NewImageName;?//Name?for?Big?Image??
??
????????????//Resize?image?to?our?Specified?Size?by?calling?resizeIma