jquery異步上傳圖片
阿新 • • 發佈:2017-08-19
類型 -type 格式 extension query log _array targe set
用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異步上傳圖片