jQuery+PHP實(shí)現(xiàn)圖片上傳并提交功能
圖片上傳思路：通過(guò)ajax實(shí)現(xiàn)圖片上傳，然后把PHP返回的圖片地址，加入到隱藏字段中，最后通過(guò)表單提交給后臺(tái)PHP，代碼如下
HTML代碼 zimg.html文件：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>自定義上傳圖片</title></head><body> <form action='a.php?action=2' method='post'> <span> 上傳圖片 </span> <span> <input type='file' name='img_url' accept='.jpg, .gif, .jpeg, .bmp, .png'/> <a onclick='UpLoadImg()'>上傳</a> <input type='hidden' name='url_data'/> </span> <br> <span> <input type='submit' value='提交'> </span> </form> </body><!-- 引入jq --><script src='https://code.jquery.com/jquery-3.0.0.min.js'></script><script> function UpLoadImg(){ //獲取上傳文件 var formData = new FormData(); formData.append(’img_url’, $(’#img_url’)[0].files[0]); console.log(formData) //提交后臺(tái)處理 $.ajax({ url: ’a.php?action=1’, type: ’POST’, cache: false, data: formData, dataType: 'JSON', processData: false, contentType: false }).done(function(res) { console.log(res.url); if(res.status == 1){ //賦值給字段 $(’#url_data’).val(res.url); alert(res.msg) }else{ alert(res.msg) } }).fail(function(res) { }); }</script></html>
后臺(tái)PHP代碼 a.php：
<?phpif($_GET[’action’] == 1){//上傳圖片接口 $img = $_FILES[’img_url’]; //獲取上圖片后綴 $type = strstr($img[’name’], ’.’); $rand = rand(1000, 9999); //命名圖片名稱(chēng) $pics = date('YmdHis') . $rand . $type; //上傳路徑 $pic_path = 'img/'. $pics; //移動(dòng)到指定目錄，上傳圖片 $res = move_uploaded_file($img[’tmp_name’], $pic_path); if($res){ echo json_encode([’status’ => 1, ’msg’ => ’上傳成功’,’url’ => $pic_path]);exit; }else{ echo json_encode([’status’ => 0, ’msg’ => ’上傳失敗’]);exit; }}elseif($_GET[’action’] == 2){//提交文件表單 echo ’<pre>’; var_dump($_POST);}
最后實(shí)現(xiàn)效果如下：
ps：js代碼是使用jQuery的寫(xiě)法，需引入jQuery代碼庫(kù)文件
到此這篇關(guān)于jQuery加PHP實(shí)現(xiàn)圖片上傳并提交實(shí)現(xiàn)詳解的文章就介紹到這了,更多相關(guān)jQuery加PHP實(shí)現(xiàn)圖片上傳并提交內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 使用EF Code First搭建簡(jiǎn)易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫(kù)遷移2. HTML <!DOCTYPE> 標(biāo)簽3. HTML5 Canvas繪制圖形從入門(mén)到精通4. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案5. vue父子組件傳值不能實(shí)時(shí)更新的解決方法6. Matplotlib可視化之添加讓統(tǒng)計(jì)圖變得簡(jiǎn)單易懂的注釋7. PHP結(jié)構(gòu)型模式之代理模式8. python中數(shù)據(jù)庫(kù)like模糊查詢(xún)方式9. php中Workerman框架實(shí)例講解10. PHP下載采集圖片到本地的方法詳解【可忽略ssl認(rèn)證】
網(wǎng)公網(wǎng)安備