首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > PHP >

jquery php多资料上传

2013-10-10 
jquery php多文件上传多文件上传演示?index.phpPHP Codediv?iduploaderform??form?actionupload.p

jquery php多文件上传

多文件上传

jquery php多资料上传演示

?

index.php

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

js文件

JavaScript Code
  1. <script?type="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?<?MaxFileInputs)??
  19. ????????{??
  20. ????????????$('<span><input?type="file"?id="fileInputBox"?size="20"?name="file[]"?style="margin: auto; padding-left: 5px; color: #aa0000;">????????????i++;??
  21. ????????}??
  22. ????????return?false;??
  23. });??
  24. ??
  25. $("body").on("click",".removeclass",?function(e){??
  26. ????????event.returnValue?=?false;??
  27. ????????if(?i?>?1?)?{??
  28. ????????????????$(this).parents('span').remove();i--;??
  29. ????????}??
  30. ??????????
  31. });???
  32. ??
  33. $("#ShowForm").click(function?()?{??
  34. ??$("#uploaderform").slideToggle();?//Slide?Toggle?upload?form?on?click??
  35. });??
  36. ??????
  37. $(myform).ajaxForm({??
  38. ????beforeSend:?function()?{?//brfore?sending?form??
  39. ????????submitbutton.attr('disabled',?'');?//?disable?upload?button??
  40. ????????statustxt.empty();??
  41. ????????progressbox.show();?//show?progressbar??
  42. ????????progressbar.width(completed);?//initial?value?0%?of?progressbar??
  43. ????????statustxt.html(completed);?//set?status?text??
  44. ????????statustxt.css('color','#000');?//initial?color?of?status?text??
  45. ??????????
  46. ????},??
  47. ????uploadProgress:?function(event,?position,?total,?percentComplete)?{?//on?progress??
  48. ????????progressbar.width(percentComplete?+?'%')?//update?progressbar?percent?complete??
  49. ????????statustxt.html(percentComplete?+?'%');?//update?status?text??
  50. ????????if(percentComplete>50)??
  51. ????????????{??
  52. ????????????????statustxt.css('color','#fff');?//change?status?text?to?white?after?50%??
  53. ????????????}else{??
  54. ????????????????statustxt.css('color','#000');??
  55. ????????????}??
  56. ??????????????
  57. ????????},??
  58. ????complete:?function(response)?{?//?on?complete??
  59. ????????output.html(response.responseText);?//update?element?with?received?data??
  60. ????????myform.resetForm();??//?reset?form??
  61. ????????submitbutton.removeAttr('disabled');?//enable?submit?button??
  62. ????????progressbox.hide();?//?hide?progressbar??
  63. ????????$("#uploaderform").slideUp();?//?hide?form?after?upload??
  64. ????}??
  65. });??
  66. ??
  67. });???
  68. </script>???

?uoload.php

?

PHP Code
  1. <noscript>??
  2. <div?align="center"><a?href="index.php">Go?Back?To?Upload?Form</a></div><!--?If?javascript?is?disabled?-->??
  3. </noscript>??
  4. <?php??
  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??'<ul>';??
  30. ??????
  31. ????for?($i=0;?$i?<?$c;?$i++)??
  32. ????{??
  33. ????????$processImage???????????=?true;???
  34. ????????$RandomNumber???????????=?rand(0,?9999999999);??//?We?need?same?random?name?for?both?files.??
  35. ??????????
  36. ????????if(!isset($ImageName[$i])?||?!is_uploaded_file($TempSrc[$i]))??
  37. ????????{??
  38. ????????????echo?'<div?style="margin: auto; padding: 0px; color: #dd0000;">$ImageName[$i].'</strong>,?may?be?file?too?big!</div>';?//output?error??
  39. ????????}??
  40. ????????else??
  41. ????????{??
  42. ????????????//Validate?file?+?create?image?from?uploaded?file.??
  43. ????????????switch(strtolower($ImageType[$i]))??
  44. ????????????{??
  45. ????????????????case?'image/png':??
  46. ????????????????????$CreatedImage?=?imagecreatefrompng($TempSrc[$i]);??
  47. ????????????????????break;??
  48. ????????????????case?'image/gif':??
  49. ????????????????????$CreatedImage?=?imagecreatefromgif($TempSrc[$i]);??
  50. ????????????????????break;??
  51. ????????????????case?'image/jpeg':??
  52. ????????????????case?'image/pjpeg':??
  53. ????????????????????$CreatedImage?=?imagecreatefromjpeg($TempSrc[$i]);??
  54. ????????????????????break;??
  55. ????????????????default:??
  56. ????????????????????$processImage?=?false;?//image?format?is?not?supported!??
  57. ????????????}??
  58. ????????????//get?Image?Size??
  59. ????????????list($CurWidth,$CurHeight)=getimagesize($TempSrc[$i]);??
  60. ??
  61. ????????????//Get?file?extension?from?Image?name,?this?will?be?re-added?after?random?name??
  62. ????????????$ImageExt?=?substr($ImageName[$i],?strrpos($ImageName[$i],?'.'));??
  63. ????????????$ImageExt?=?str_replace('.','',$ImageExt);??
  64. ??????
  65. ????????????//Construct?a?new?image?name?(with?random?number?added)?for?our?new?image.??
  66. ????????????$NewImageName?=?$RandomNumber.'.'.$ImageExt;??
  67. ??
  68. ????????????//Set?the?Destination?Image?path?with?Random?Name??
  69. ????????????$thumb_DestRandImageName????=?$DestinationDirectory.$ThumbPrefix.$NewImageName;?//Thumb?name??
  70. ????????????$DestRandImageName??????????=?$DestinationDirectory.$NewImageName;?//Name?for?Big?Image??
  71. ??
  72. ????????????//Resize?image?to?our?Specified?Size?by?calling?resizeImage?function.??
  73. ????????????if($processImage?&&?resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType[$i]))??
  74. ????????????{??
  75. ????????????????//Create?a?square?Thumbnail?right?after,?this?time?we?are?using?cropImage()?function??
  76. ????????????????if(!cropImage($CurWidth,$CurHeight,$ThumbSquareSize,$thumb_DestRandImageName,$CreatedImage,$Quality,$ImageType[$i]))??
  77. ????????????????????{??
  78. ????????????????????????echo?'Error?Creating?thumbnail';??
  79. ????????????????????}??
  80. ????????????????????/*?
  81. ????????????????????At?this?point?we?have?succesfully?resized?and?created?thumbnail?image?
  82. ????????????????????We?can?render?image?to?user's?browser?or?store?information?in?the?database?
  83. ????????????????????For?demo,?we?are?going?to?output?results?on?browser.?
  84. ????????????????????*/??
  85. ??????????????????????
  86. ????????????????????//Get?New?Image?Size??
  87. ????????????????????list($ResizedWidth,$ResizedHeight)=getimagesize($DestRandImageName);??
  88. ??????????????????????
  89. ????????????????????echo?'<table?width="100%"?border="0"?cellpadding="4"?cellspacing="0">';?
  90. ????????????????????echo?'<tr>';?
  91. ????????????????????echo?'<td?align="center"><img?src="../upload/'.$ThumbPrefix.$NewImageName.'"?alt="Thumbnail"?height="'.$ThumbSquareSize.'"?width="'.$ThumbSquareSize.'"></td>';?
  92. ????????????????????echo?'</tr><tr>';?
  93. ????????????????????echo?'<td?align="center"><img?src="../upload/'.$NewImageName.'"?alt="Resized?Image"?height="'.$ResizedHeight.'"?width="'.$ResizedWidth.'"></td>';?
  94. ????????????????????echo?'</tr>';?
  95. ????????????????????echo?'</table>';?
  96. ????????????????????/*?
  97. ????????????????????//?Insert?info?into?database?table!?
  98. ????????????????????mysql_query("INSERT?INTO?myImageTable?(ImageName,?ThumbName,?ImgPath)?
  99. ????????????????????VALUES?($DestRandImageName,?$thumb_DestRandImageName,?'../upload/')");?
  100. ????????????????????*/?
  101. ?
  102. ????????????}else{?
  103. ????????????????echo?'<div?class="error">Error?occurred?while?trying?to?process?<strong>'.$ImageName[$i].'</strong>!?Please?check?if?file?is?supported</div>';?//output?error?
  104. ????????????}?
  105. ?????????????
  106. ????????}?
  107. ?????????
  108. ????}?
  109. ????echo?'</ul>';?
  110. ????}?
  111. }?
  112. ?????
  113. //?This?function?will?proportionally?resize?image??
  114. function?resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)?
  115. {?
  116. ????//Check?Image?size?is?not?0?
  117. ????if($CurWidth?<=?0?||?$CurHeight?<=?0)??
  118. ????{?
  119. ????????return?false;?
  120. ????}?
  121. ?????
  122. ????//Construct?a?proportional?size?of?new?image?
  123. ????$ImageScale?????????=?min($MaxSize/$CurWidth,?$MaxSize/$CurHeight);??
  124. ????$NewWidth???????????=?ceil($ImageScale*$CurWidth);?
  125. ????$NewHeight??????????=?ceil($ImageScale*$CurHeight);?
  126. ?????
  127. ????if($CurWidth?<?$NewWidth?||?$CurHeight?<?$NewHeight)?
  128. ????{?
  129. ????????$NewWidth?=?$CurWidth;?
  130. ????????$NewHeight?=?$CurHeight;?
  131. ????}?
  132. ????$NewCanves??=?imagecreatetruecolor($NewWidth,?$NewHeight);?
  133. ????//?Resize?Image?
  134. ????if(imagecopyresampled($NewCanves,?$SrcImage,0,?0,?0,?0,?$NewWidth,?$NewHeight,?$CurWidth,?$CurHeight))?
  135. ????{?
  136. ????????switch(strtolower($ImageType))?
  137. ????????{?
  138. ????????????case?'image/png':?
  139. ????????????????imagepng($NewCanves,$DestFolder);?
  140. ????????????????break;?
  141. ????????????case?'image/gif':?
  142. ????????????????imagegif($NewCanves,$DestFolder);?
  143. ????????????????break;???????????
  144. ????????????case?'image/jpeg':?
  145. ????????????case?'image/pjpeg':?
  146. ????????????????imagejpeg($NewCanves,$DestFolder,$Quality);?
  147. ????????????????break;?
  148. ????????????default:?
  149. ????????????????return?false;?
  150. ????????}?
  151. ????if(is_resource($NewCanves))?{??
  152. ??????imagedestroy($NewCanves);??
  153. ????}??
  154. ????return?true;?
  155. ????}?
  156. ?
  157. }?
  158. ?
  159. //This?function?corps?image?to?create?exact?square?images,?no?matter?what?its?original?size!?
  160. function?cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType)?
  161. {?????
  162. ????//Check?Image?size?is?not?0?
  163. ????if($CurWidth?<=?0?||?$CurHeight?<=?0)??
  164. ????{?
  165. ????????return?false;?
  166. ????}?
  167. ?????
  168. ????//abeautifulsite.net?has?excellent?article?about?"Cropping?an?Image?to?Make?Square"?
  169. ????//http://www.abeautifulsite.net/blog/2009/08/cropping-an-image-to-make-square-thumbnails-in-php/?
  170. ????if($CurWidth>$CurHeight)?
  171. ????{?
  172. ????????$y_offset?=?0;?
  173. ????????$x_offset?=?($CurWidth?-?$CurHeight)?/?2;?
  174. ????????$square_size????=?$CurWidth?-?($x_offset?*?2);?
  175. ????}else{?
  176. ????????$x_offset?=?0;?
  177. ????????$y_offset?=?($CurHeight?-?$CurWidth)?/?2;?
  178. ????????$square_size?=?$CurHeight?-?($y_offset?*?2);?
  179. ????}?
  180. ?????
  181. ????$NewCanves??=?imagecreatetruecolor($iSize,?$iSize);??
  182. ????if(imagecopyresampled($NewCanves,?$SrcImage,0,?0,?$x_offset,?$y_offset,?$iSize,?$iSize,?$square_size,?$square_size))?
  183. ????{?
  184. ????????switch(strtolower($ImageType))?
  185. ????????{?
  186. ????????????case?'image/png':?
  187. ????????????????imagepng($NewCanves,$DestFolder);?
  188. ????????????????break;?
  189. ????????????case?'image/gif':?
  190. ????????????????imagegif($NewCanves,$DestFolder);?
  191. ????????????????break;???????????
  192. ????????????case?'image/jpeg':?
  193. ????????????case?'image/pjpeg':??
  194. ????????????????imagejpeg($NewCanves,$DestFolder,$Quality);??
  195. ????????????????break;??
  196. ????????????default:??
  197. ????????????????return?false;??
  198. ????????}??
  199. ????if(is_resource($NewCanves))?{???
  200. ??????imagedestroy($NewCanves);???
  201. ????}???
  202. ????return?true;??
  203. ??
  204. ????}??
  205. ????????
  206. }??

?


原文地址:http://www.freejs.net/article_biaodan_45.html

读书人精选
热点排行