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


Posted in PHP onJuly 27, 2020

图片上传思路:通过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);
}

最后实现效果如下:

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

ps:js代码是使用jQuery的写法,需引入jQuery代码库文件

到此这篇关于jQuery加PHP实现图片上传并提交实现详解的文章就介绍到这了,更多相关jQuery加PHP实现图片上传并提交内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

PHP 相关文章推荐
PHP 柱状图实现代码
Dec 04 PHP
PHP中如何判断AJAX提交的数据
Feb 05 PHP
解析zend Framework如何自动加载类
Jun 28 PHP
用php简单实现加减乘除计算器
Jan 06 PHP
php把session写入数据库示例
Feb 26 PHP
yii用户注册表单验证实例
Dec 26 PHP
php HTML无刷新提交表单
Apr 05 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
Nov 21 PHP
php使用PDO获取结果集的方法
Feb 16 PHP
彻底搞懂PHP 变量结构体
Oct 11 PHP
解决laravel 出现ajax请求419(unknown status)的问题
Sep 03 PHP
PHP开发api接口安全验证操作实例详解
Mar 26 PHP
关于PHP中interface的用处详解
Jul 26 #PHP
Laravel中如何轻松容易的输出完整的SQL语句
Jul 26 #PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
Jul 24 #PHP
php实现商城购物车的思路和源码分析
Jul 23 #PHP
PHP安全之register_globals的on和off的区别
Jul 23 #PHP
PHP代码覆盖率统计详解
Jul 22 #PHP
php实现统计IP数及在线人数的示例代码
Jul 22 #PHP
You might like
火车头采集器3.0采集图文教程
2007/03/17 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
手机号码,密码正则验证
2014/09/04 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python实现学生管理系统
2018/01/11 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Django的models中on_delete参数详解
2019/07/16 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
高中数学教师求职信
2013/10/30 职场文书
厂长岗位职责
2014/02/19 职场文书
理想演讲稿范文
2014/05/21 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
精神病医院见习报告
2014/11/03 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
门卫管理制度范本
2015/08/05 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
什么是SOLID
2022/03/24 Javascript