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 05 PHP
php中防止恶意刷新页面的代码小结
Oct 31 PHP
分享一个超好用的php header下载函数
Jan 31 PHP
用PHP来计算某个目录大小的方法
Apr 01 PHP
PHP中的多行字符串传递给JavaScript的两种方法
Jun 19 PHP
Yii2超好用的日期和时间组件(值得收藏)
May 05 PHP
php实现的简单数据库操作Model类
Nov 16 PHP
PHP递归删除多维数组中的某个值
Apr 17 PHP
php实现的pdo公共类定义与用法示例
Jul 19 PHP
PHP操作XML中XPath的应用示例
Jul 04 PHP
laravel5.5添加echarts实现画图功能的方法
Oct 09 PHP
laravel框架中视图的基本使用方法分析
Nov 23 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
解析zend Framework如何自动加载类
2013/06/28 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python编写计算器功能
2019/10/25 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
《李广射虎》教学反思
2014/04/27 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
淮海战役观后感
2015/06/11 职场文书