jQuery加PHP实现图片上传并提交的示例代码


Posted in jQuery onJuly 16, 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实现图片上传的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
You might like
PHP 简单日历实现代码
2009/10/28 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
webpack4简单入门实例
2018/09/06 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
python实现简单socket通信的方法
2016/04/19 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python使用正则筛选信用卡
2019/01/27 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Pytorch之Variable的用法
2019/12/31 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
单位委托书怎么写
2014/09/21 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
多人股份制合作协议书
2016/03/19 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python