PHP+jQuery+Ajax實現(xiàn)多圖片上傳

這篇文章主要介紹“PHP+jQuery+Ajax實現(xiàn)多圖片上傳”，在日常操作中，相信很多人在PHP+jQuery+Ajax實現(xiàn)多圖片上傳問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”PHP+jQuery+Ajax實現(xiàn)多圖片上傳”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

我們在本文中用到一個Ajax表單提交插件：jqery.form.js，有高人修改了幾行代碼并改名為：jquery.wallform.js，直接拿來用。

HTML

我們在頁面上放置一個form表單，使用post提交到后臺php處理程序upload.php，注意enctype屬性設置要支持文件上傳。#preview用來顯示上傳完畢后的圖片。關于css樣式設置本文不加說明，請參照下載包的源碼。

<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.wallform.js"></script>

當點擊按鈕“添加圖片”后，彈出選擇文件對話框，選擇要上傳的圖片后，觸發(fā)change事件。然后表單#imageform調用jquery.wallform.js的ajaxForm()方法，將表單數據提交給后臺PHP處理，并根據返回結果處理頁面元素的展示。如果上傳成功，圖片會一張張排列顯示在頁面上。關于ajaxForm()的使用可以參照本站文章：Ajax表單提交插件jqery form。

$(function(){$('#photoimg').die('click').live('change', function(){var status = $("#up_status");var btn = $("#up_btn");$("#imageform").ajaxForm({target: '#preview', beforeSubmit:function(){status.show();btn.hide();}, success:function(){status.hide();btn.show();}, error:function(){status.hide();btn.show();} }).submit();});});

PHP

upload.php處理圖片上傳，并將上傳好的圖片保存在uploads/目錄，注意該目錄要有寫權限。首先需要檢測是否為POST方式提交，然后判斷圖片格式、圖片大小是否符合要求，然后使用move_uploaded_file()上傳圖片，并將圖片重命名，格式為：time().rand(100,999)。

$path = "uploads/";$extArr = array("jpg", "png", "gif");if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){$name = $_FILES['photoimg']['name'];$size = $_FILES['photoimg']['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['photoimg']['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;}

當然，實際應用中，可以與數據庫以及用戶中心結合，將用戶上傳的圖片保存在數據表中，具體應用大家可以自行研究。

到此，關于“PHP+jQuery+Ajax實現(xiàn)多圖片上傳”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>