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循环获取GET和POST值的代码
Apr 09 PHP
了解Joomla 这款来自国外的php网站管理系统
Mar 11 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
Nov 07 PHP
开源php中文分词系统SCWS安装和使用实例
Apr 11 PHP
destoon实现商铺管理主页设置增加新菜单的方法
Jun 26 PHP
跟我学Laravel之快速入门
Oct 15 PHP
php实现给图片加灰色半透明效果的方法
Oct 20 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
Dec 15 PHP
PHPCMS V9 添加二级导航的思路详解
Oct 20 PHP
thinkPHP商城公告功能开发问题分析
Dec 01 PHP
理清PHP在Linxu下执行时的文件权限方法
Jun 07 PHP
PHP钩子与简单分发方式实例分析
Sep 04 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
让PHP更快的提供文件下载的代码
2012/06/13 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue组件学习教程
2017/09/09 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
《学会合作》教学反思
2014/04/12 职场文书
十八大演讲稿
2014/05/22 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers