jQuery+PHP实现图片上传并提交功能
更新时间：2020年07月27日 16:21:46 作者：在斑马线上散布
这篇文章主要介绍了jQuery加PHP实现图片上传并提交实现详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
图片上传思路：通过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>
<!-- 引入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)
//提交后台处理
$.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);
}
最后实现效果如下：
ps：js代码是使用jQuery的写法，需引入jQuery代码库文件
到此这篇关于jQuery加PHP实现图片上传并提交实现详解的文章就介绍到这了,更多相关jQuery加PHP实现图片上传并提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
当执行某一操作比如确认或者取消时如何弹出对话框，针对这个需求，下面使用php来实现下，感兴趣的朋友不要错过2013-12-12
PHP的分页功能...2007-03-03
PHP上传图片进行等比缩放，大家可以自行添加增加水印功能，具体代码如下，喜欢的朋友可以参考下2014-01-01
本篇文章是对php数组(array)输出的三种形式进行了详细的分析介绍，需要的朋友参考下2013-06-06
这篇文章主要介绍了PHP加密解密实现方法,结合实例形式分析了PHP自定义函数实现字符串加密与对应解密的相关技巧,需要的朋友可以参考下2015-12-12
这篇文章主要整理了关于php日期时间运算相关内容，涉及知识点较为全面，感兴趣的小伙伴们可以参考一下2015-11-11
最近学习URL跳转的时候新进三个超好用的PHP加密解密函数,貌似是discuz里的…使用这些加密解密的原因是因为有时自己的URL地址被人获取以后想破解你里面传值的内容就必须知道你的key，没有key，他应该要破了一阵子才能知道你URL里面的内容吧。2010-04-04
这篇文章主要介绍了PHP数组排序之sort、asort与ksort用法,实例中简单示范了sort、asort与ksort的用法,并备有注释加以详细说明,需要的朋友可以参考下2014-09-09
phpMyAdmin 试图连接到 MySQL 服务器，但服务器拒绝连接。您应该检查 config.inc.php 中的主机、用户名和密码，并且确定这些信息与 MySQL 服务器的管理员所给出的信息一致。2009-12-12
这篇文章主要介绍了PHP数据库连接mysql与mysqli对比分析，以及php中mysqli用法举例，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论