コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > jquery php多资料上传

jquery php多资料上传

WBOY
リリース： 2016-06-13 11:36:40
オリジナル
1203 人が閲覧しました

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. ?????class="button"?id="SubmitButton">Upload??
  17. ??????
  18. ????
    "progressbox">
    "progressbar">
    ?>
    "statustxt">0%
    ?>
    ??
  19. ??
??
  • "uploadResults">??
  • ????
    "center"?style="margin:20px;">"#"?id="ShowForm">打开/隐藏?表单
    ??
  • ????
    "output">
    ??
    • ??

    js文件

    JavaScript Code
    1. <script><span class="string" style="margin: auto; padding: 0px; color: blue;">"text/javascript"</script>>???
    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. ????????????$('jquery php多资料上传').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. ???

    ?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??'
        '
      ;??
    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?'
      Error?occurred?while?trying?to?process?'.$ImageName[$i].',?may?be?file?too?big!
      '      ;?//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?resizeIma
    関連ラベル：
    gt image lt
    ソース：php.cn
    前の記事：100分PHP怎么获取PUT和DELETE请求的参数 次の記事：php正则表达式 示意点号
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
    から 2024-04-16 09:34:16
    0
    0
    4687
    戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
    から 2024-04-06 21:55:20
    0
    1
    778
    ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
    から 2024-04-06 21:58:04
    0
    1
    800
    Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
    から 2024-04-06 21:28:37
    0
    1
    2257
    グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
    から 2024-04-06 20:29:08
    0
    2
    492
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート