?? "upload.php" ?method= "post" ?enctype= "multipart/form-data" ?name= "UploadForm" ?id= "UploadForm" >?? ????jquery?php多文件上"/>
PHP头条
热点：

jqueryphp多资料上传


热度1 评论 236
www.PHPzy.Com  网友分享于：       浏览数6284次

jqueryphp多资料上传


jquery php多文件上传

多文件上传

演示

?

index.php

PHP Code
  1. "uploaderform">??
  2. "upload.php"?method="post"?enctype="multipart/form-data"?name="UploadForm"?id="UploadForm">??
  3. ????jquery?php多文件上传(本例限制为3个文件)???
  4. ????
  5. ????class="small">"#"?id="AddMoreFileBox">添加上传框??
  6. ??????
  7. ????"AddFileInputBox">"fileInputBox"?style="margin-bottom:?5px;"?type="file"??name="file[]"/>??
  8. ????class="sep_s">??
  9. ??????
  10. ????
  11. ?????
  12. ??????
  13. ????"username"?type="text"?id="username"?value="freejs.net"?/>??
  14. ??????
  15. ?????
  16. ????"submit"?class="button"?id="SubmitButton">Upload??
  17. ??????
  18. ????"progressbox">"progressbar">"statustxt">0%??
  19. ??
  20. ??
  21. "uploadResults">??
  22. ????"center"?style="margin:20px;">"#"?id="ShowForm">打开/隐藏?表单??
  23. ????"output">??
  24. ??

js文件

JavaScript Code
  1. "text/javascript">???
  2. $(document).ready(function()?{???
  3. //elements??
  4. var?progressbox?????????=?$('#progressbox');?//progress?bar?wrapper??
  5. var?progressbar?????????=?$('#progressbar');?//progress?bar?element??
  6. var?statustxt???????????=?$('#statustxt');?//status?text?element??
  7. var?submitbutton????????=?$("#SubmitButton");?//submit?button??
  8. var?myform??????????????=?$("#UploadForm");?//upload?form??
  9. var?output??????????????=?$("#output");?//ajax?result?output?element??
  10. var?completed???????????=?'0%';?//initial?progressbar?value??
  11. var?FileInputsHolder????=?$('#AddFileInputBox');?//Element?where?additional?file?inputs?are?appended??
  12. var?MaxFileInputs???????=?3;?//Maximum?number?of?file?input?boxs??
  13. ??
  14. //?adding?and?removing?file?input?box??
  15. var?i?=?$("#AddFileInputBox?div").size()?+?1;??
  16. $("#AddMoreFileBox").click(function?()?{??
  17. ????????event.returnValue?=?false;??
  18. ????????if(i?
  19. ????????{??
  20. ????????????$('').appendTo(FileInputsHolder);??
  21. ????????????i++;??
  22. ????????}??
  23. ????????return?false;??
  24. });??
  25. ??
  26. $("body").on("click",".removeclass",?function(e){??
  27. ????????event.returnValue?=?false;??
  28. ????????if(?i?>?1?)?{??
  29. ????????????????$(this).parents('span').remove();i--;??
  30. ????????}??
  31. ??????????
  32. });???
  33. ??
  34. $("#ShowForm").click(function?()?{??
  35. ??$("#uploaderform").slideToggle();?//Slide?Toggle?upload?form?on?click??
  36. });??
  37. ??????
  38. $(myform).ajaxForm({??
  39. ????beforeSend:?function()?{?//brfore?sending?form??
  40. ????????submitbutton.attr('disabled',?'');?//?disable?upload?button??
  41. ????????statustxt.empty();??
  42. ????????progressbox.show();?//show?progressbar??
  43. ????????progressbar.width(completed);?//initial?value?0%?of?progressbar??
  44. ????????statustxt.html(completed);?//set?status?text??
  45. ????????statustxt.css('color','#000');?//initial?color?of?status?text??
  46. ??????????
  47. ????},??
  48. ????uploadProgress:?function(event,?position,?total,?percentComplete)?{?//on?progress??
  49. ????????progressbar.width(percentComplete?+?'%')?//update?progressbar?percent?complete??
  50. ????????statustxt.html(percentComplete?+?'%');?//update?status?text??
  51. ????????if(percentComplete>50)??
  52. ????????????{??
  53. ????????????????statustxt.css('color','#fff');?//change?status?text?to?white?after?50%??
  54. ????????????}else{??
  55. ????????????????statustxt.css('color','#000');??
  56. ????????????}??
  57. ??????????????
  58. ????????},??
  59. ????complete:?function(response)?{?//?on?complete??
  60. ????????output.html(response.responseText);?//update?element?with?received?data??
  61. ????????myform.resetForm();??//?reset?form??
  62. ????????submitbutton.removeAttr('disabled');?//enable?submit?button??
  63. ????????progressbox.hide();?//?hide?progressbar??
  64. ????????$("#uploaderform").slideUp();?//?hide?form?after?upload??
  65. ????}??
  66. });??
  67. ??
  68. });???
  69. 《script》???

?uoload.php

?

PHP Code
  2. "center">"index.php">Go?Back?To?Upload?Form??
  3. ??
  5. //If?you?face?any?errors,?increase?values?of?"post_max_size",?"upload_max_filesize"?and?"memory_limit"?as?required?in?php.ini??
  6. ??
  7. ?//Some?Settings??
  8. $ThumbSquareSize????????=?200;?//Thumbnail?will?be?200x200??
  9. $BigImageMaxSize????????=?500;?//Image?Maximum?height?or?width??
  10. $ThumbPrefix????????????=?"thumb_";?//Normal?thumb?Prefix??
  11. $DestinationDirectory???=?'../upload/';?//Upload?Directory?ends?with?/?(slash)??
  12. $Quality????????????????=?90;??
  13. ??
  14. //ini_set('memory_limit',?'-1');?//?maximum?memory!??
  15. ??
  16. foreach($_FILES?as?$file)??
  17. {??
  18. //?some?information?about?image?we?need?later.??
  19. $ImageName??????=?$file['name'];??
  20. $ImageSize??????=?$file['size'];??
  21. $TempSrc????????=?$file['tmp_name'];??
  22. $ImageType??????=?$file['type'];??
  23. ??
  24. ??
  25. if?(is_array($ImageName))???
  26. {??
  27. ????$c?=?count($ImageName);??
  28. ??????
  29. ????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??
    • www.phpzy.comtrue/phprm/12601.htmlTechArticlejqueryphp多资料上传 jquery php多文件上传 多文件上传 演示 ? index.php PHP Code "uploaderform" >?? "upload.php" ?method= "post" ?enctype= "multipart/form-data" ?name= "UploadForm" ?id= "UploadForm" >?? ????jquery?php多文件上...

相关文章

相关频道：

PHP之友评论

今天推荐