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 相关文章推荐
如何将数据从文本导入到mysql
Oct 09 PHP
PHP批量检测并去除文件BOM头代码实例
May 08 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
Jun 05 PHP
yii中widget的用法
Dec 03 PHP
PHP使用http_build_query()构造URL字符串的方法
Apr 02 PHP
PHP函数import_request_variables()用法分析
Apr 02 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
Mar 08 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
Feb 23 PHP
php实现微信公众号企业转账功能
Oct 01 PHP
php实现分页功能的详细实例方法
Sep 29 PHP
PHP7 安装event扩展的实现方法
Oct 08 PHP
Laravel第三方包报class not found的解决方法
Oct 13 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
全面了解js中的script标签
2016/07/04 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
事业单位竞聘上岗实施方案
2014/03/28 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
校园新闻稿范文
2015/07/18 职场文书
中学教代会开幕词
2016/03/04 职场文书
关于感恩的作文
2019/08/26 职场文书