當前位置:首頁 > PHP源碼 > 列表

php+ajax+h5實現圖片上傳功能

發布:smiling 來源: PHP粉絲網  添加日期:2018-11-02 20:23:52 瀏覽: 評論:0 

本文實例為大家分享了php實現ajax圖片上傳的具體代碼,供大家參考,具體內容如下.

html頁面代碼:

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>Title</title> 
  6.   <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.11.0.js"></script> 
  7.   
  8. </head> 
  9. <body> 
  10. <form class="form-horizontal" role="form" id="myForm" 
  11.    action="/index/fileupsend" method="post" 
  12.    enctype="multipart/form-data"> 
  13.   
  14.   選擇文件:<input type="file" id="file1" /><br /> 
  15.   <input type="button" id="upload" value="上傳" /> 
  16.   <span id="imgWait"></span> 
  17. </form> 
  18. <script> 
  19.   $(function () { 
  20.     $("#upload").click(function () { 
  21.       $("#imgWait").html("上傳中"); 
  22.       var formData = new FormData(); 
  23.       formData.append("myfile", document.getElementById("file1").files[0]); 
  24.       $.ajax({ 
  25.         url: "/Home/index/fileupsend", 
  26.         type: "POST", 
  27.         data: formData, 
  28.         /** 
  29.          *必須false才會自動加上正確的Content-Type 
  30.          */ 
  31.         contentType: false, 
  32.         /** 
  33.          * 必須false才會避開jQuery對 formdata 的默認處理 
  34.          * XMLHttpRequest會對 formdata 進行正確的處理 
  35.          */ 
  36.         processData: false, 
  37.         success: function (data) { 
  38.           if(data){ 
  39.             alert("上傳成功!"); 
  40.           } 
  41.           $("#imgWait").html("上傳成功"); 
  42.   
  43.         }, 
  44.         error: function () { 
  45.           alert("上傳失敗!"); 
  46.           $("#imgWait").hide(); 
  47.         } 
  48.       }); 
  49.     }); 
  50.   }); 
  51. </script> 
  52. </body> 
  53. </html> 

php代碼:

  1. public function fileupsend(){ 
  2.   $type_pic = $this->file_upload('1',array('jpg''gif''png''jpeg'),'filetest','myfile'); 
  3.   echo $type_pic['img_path']; 
  4.   

Tags: php+ajax+h5 圖片上傳

分享到:

相關文章

天气网首页彩吧