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生成缩略图的函数代码(修改版)
Jan 18 PHP
php中CI操作多个数据库的代码
Jul 05 PHP
注意:php5.4删除了session_unregister函数
Aug 05 PHP
PHP中spl_autoload_register函数的用法总结
Nov 07 PHP
CI框架中集成CKEditor编辑器的教程
Jun 09 PHP
javascript数组与php数组的地址传递及值传递用法实例
Jan 22 PHP
深入理解PHP内核(一)
Nov 10 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
Mar 21 PHP
PHP文字转图片功能原理与实现方法分析
Aug 31 PHP
PHP钩子与简单分发方式实例分析
Sep 04 PHP
通过代码实例解析PHP session工作原理
Dec 11 PHP
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
Apr 01 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
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python实现斐波那契递归函数的方法
2014/09/08 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Python字符串及文本模式方法详解
2020/09/10 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
最新大学职业规划书范文
2013/12/30 职场文书
英语课外活动总结
2014/08/27 职场文书
党员批评与自我批评
2014/10/15 职场文书
创建文明城市倡议书
2015/04/28 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电