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自定义多选下拉框效果
Jun 19 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jquery轮播图插件使用方法详解
Jul 31 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上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
jQuery extend()详解及简单实例
2017/05/06 jQuery
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python实现Windows电脑定时关机
2018/06/20 Python
python实现黑客字幕雨效果
2018/06/21 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
通过实例解析Python return运行原理
2020/03/04 Python
如何理解python中数字列表
2020/05/29 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
如何查找网页漏洞
2016/06/22 面试题
旅行社各个岗位职责
2014/03/15 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
幼儿园六一主持词
2015/06/30 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python