jquery非同步上傳圖片

標籤：ror   ext   end   超過   false   類型   jquer   sda   ajax   

用ajaxfileupload.js外掛程式實現圖片的非同步上傳

html代碼

<input id="img" type="file" name="img" />

Js代碼

$(‘#img‘).change(function () {$.ajaxFileUpload({  url:‘demo.php‘, //你處理上傳檔案的服務端  secureuri:false,   fileElementId:‘img‘,//與頁面處理代碼中file相對應的ID值　　　　　　　　　　　　　　processData : false, 　　　　　　　　　　　　　　　　　　　　　contentType : false, 　　　　　　　　　　　　　　dataType: ‘text‘, //返回資料類型:看後端返回的是什麼資料,在IE下後端要佈建要求頭的Content-Type:text/html; charset=UTF-8  success: function (data, status) { },error: function(data, status, e){ //提交失敗自動執行的處理函數  alert(e);}})});
//可以添加檔案尾碼判斷

php代碼

<?php$path = "./";  $extArr = array("jpg", "png", "gif"); if(isset($_POST) and $_SERVER[‘REQUEST_METHOD‘] == "POST"){     $name = $_FILES[‘img‘][‘name‘];     $size = $_FILES[‘img‘][‘size‘];          if(empty($name)){         echo ‘請選擇要上傳的圖片‘;         exit;     }     $ext = extend($name);     if(!in_array($ext,$extArr)){         echo ‘圖片格式錯誤！‘;         exit;     }     if($size>(100*1024)){         echo ‘圖片大小不能超過100KB‘;         exit;     }     $image_name = time().rand(100,999).".".$ext;     $tmp = $_FILES[‘img‘][‘tmp_name‘];     if(move_uploaded_file($tmp, $path.$image_name)){         echo ‘<img src="‘.$path.$image_name.‘"  class="preview">‘;     }else{         echo ‘上傳出錯了！‘;     }     exit; }  //擷取檔案類型尾碼 function extend($file_name){     $extend = pathinfo($file_name);     $extend = strtolower($extend["extension"]);     return $extend; } 

參考部落格:

1.用法:http://blog.csdn.net/zly_ir/article/details/51145795

2.可重複上傳:http://blog.yadgen.com/?p=2010

範例程式碼  https://github.com/hongxingwen/learn/tree/master/uploadImg

 

jquery非同步上傳圖片