VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > PHP >

  • jQuery+PHP实现图片上传并提交功能

图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台PHP，代码如下。

HTML代码 zimg.html文件：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.  <meta charset="UTF-8"> 
  5.  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  6.  <title>自定义上传图片</title> 
  7. </head> 
  8. <body> 
  9.  <form action="a.php?action=2" method="post"> 
  10.  <span> 
  11.   上传图片 
  12.  </span>  
  13.    
  14.  <span> 
  15.   <input type="file" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/> 
  16.   <a onclick="UpLoadImg()">上传</a> 
  17.   <input type="hidden" id="url_data" name="url_data"/> 
  18.  </span> 
  19.  
  20.  <br> 
  21.  <span> 
  22.   <input type="submit" value="提交"> 
  23.  </span> 
  24.  </form> 
  25.    
  26. </body> 
  27. <!-- 引入jq --> 
  28. <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
  29.  
  30. <script> 
  31.  function UpLoadImg(){ 
  32.  //获取上传文件 
  33.  var formData = new FormData(); 
  34.  formData.append('img_url', $('#img_url')[0].files[0]); 
  35.  console.log(formData) 
  36.  //提交后台处理 
  37.  $.ajax({ 
  38.   url: 'a.php?action=1', 
  39.   type: 'POST', 
  40.   cache: false, 
  41.   data: formData, 
  42.   dataType: "JSON", 
  43.   processData: false, 
  44.   contentType: false 
  45.  }).done(function(res) { 
  46.   console.log(res.url); 
  47.   if(res.status == 1){ 
  48.   //赋值给字段 
  49.   $('#url_data').val(res.url); 
  50.   alert(res.msg) 
  51.   }else{ 
  52.   alert(res.msg) 
  53.   } 
  54.  }).fail(function(res) { 
  55.  
  56.  }); 
  57.  } 
  58. </script> 
  59.  
  60. </html> 

后台PHP代码 a.php：

  1. <?php 
  2. if($_GET['action'] == 1){//上传图片接口 
  3.  $img = $_FILES['img_url']; 
  4.  //获取上图片后缀 
  5.  $type = strstr($img['name'], '.'); 
  6.  $rand = rand(1000, 9999); 
  7.  //命名图片名称 
  8.  $pics = date("YmdHis") . $rand . $type;  
  9.  //上传路径 
  10.  $pic_path = "img/". $pics; 
  11.  //移动到指定目录，上传图片 
  12.  $res = move_uploaded_file($img['tmp_name'], $pic_path); 
  13.  if($res){ 
  14.  echo json_encode(['status' => 1, 'msg' => '上传成功','url' => $pic_path]);exit; 
  15.  }else{ 
  16.  echo json_encode(['status' => 0, 'msg' => '上传失败']);exit; 
  17.  } 
  18. }elseif($_GET['action'] == 2){//提交文件表单 
  19.  echo '<pre>'; 
  20.  var_dump($_POST); 
  21. } 

最后实现效果如下：

jQuery+PHP实现图片上传并提交功能

ps：js代码是使用jQuery的写法，需引入jQuery代码库文件。

 

出处：http://www.phpfensi.com/php/20220320/20209.html


相关教程