jquery異步上傳圖片

用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