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

发布:smiling　来源: PHP粉丝网　添加日期：2022-03-20 09:20:24　浏览: 评论：0　

图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台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" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/>

  <a onclick="UpLoadImg()">上传</a>

  <input type="hidden" id="url_data" name="url_data"/>

</span>

<br>

<span>

  <input type="submit" value="提交">

</span>

</form>



</body>



<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)

//提交后台处理

$.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>

后台PHP代码 a.php：

<?php

if($_GET['action'] == 1){//上传图片接口

$img = $_FILES['img_url'];

//获取上图片后缀

$type = strstr($img['name'], '.');

$rand = rand(1000, 9999);

//命名图片名称

$pics = date("YmdHis") . $rand . $type;

//上传路径

$pic_path = "img/". $pics;

//移动到指定目录，上传图片

$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);

}