jQuery+PHP实现图片上传并提交功能

 更新时间:2020-08-16 23:20:35   作者:佚名   我要评论(0)

图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下
HTML代码 zimg.html文件:


<!DOCTYPE h

图片上传思路:通过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);
}

最后实现效果如下:

ps:js代码是使用jQuery的写法,需引入jQuery代码库文件

到此这篇关于jQuery加PHP实现图片上传并提交实现详解的文章就介绍到这了,更多相关jQuery加PHP实现图片上传并提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • jQuery+ThinkPHP实现图片上传
  • jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
  • PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
  • jQuery+PHP实现上传裁剪图片
  • thinkphp jquery实现图片上传和预览效果
  • JQuery PHP图片在线裁剪实例
  • php+flash+jQuery多图片上传源码分享
  • PHP+jQuery+Ajax实现多图片上传效果
  • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
  • PHP结合JQueryJcrop实现图片裁切实例详解

相关文章

  • jQuery+PHP实现图片上传并提交功能

    jQuery+PHP实现图片上传并提交功能

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下 HTML代码 zimg.html文件: <!DOCTYPE h
    2020-08-16
  • PHP网页缓存技术优点及代码实例

    PHP网页缓存技术优点及代码实例

    前台静态化:把动态页面解析后保存为静态页面 文件缓存:把查询结果保存为文件,XML 内存缓存:memcache php缓存器:XCache、eaccelerator等 Memcache是一个高性能的
    2020-08-16
  • phpStudy vscode 搭建debug调试的教程详解

    phpStudy vscode 搭建debug调试的教程详解

    下载地址 phpstudy:https://www.xp.cn/download.html vscode:https://code.visualstudio.com/ 设置 phpstudy版本:7.3.4nts [Xdebug] zend_extension=D:/p
    2020-08-16
  • 基于PHP实现用户登录注册功能的详细教程

    基于PHP实现用户登录注册功能的详细教程

    教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2)
    2020-08-16
  • 如何通过Apache在本地配置多个虚拟主机

    如何通过Apache在本地配置多个虚拟主机

    如何使用 Apache 在本地配置出多个虚拟主机呢?而且使用不同的“域名”来访问本地不同的站点呢? 一般情况下,咱们都使用 localhost 来访问本机上的服务器,在我们的
    2020-08-16
  • PHP底层运行机制与工作原理详解

    PHP底层运行机制与工作原理详解

    最近搭建服务器,突然感觉lamp之间到底是怎么工作的,或者是怎么联系起来?平时只是写程序,重来没有思考过他们之间的工作原理: PHP底层工作原理 图1 php结构 从图
    2020-08-16
  • php模拟post提交请求调用接口示例解析

    php模拟post提交请求调用接口示例解析

    php模拟post提交请求,调用接口 /** * 模拟post进行url请求 * @param string $url * @param string $param */ function request_post($url = '', $param = '
    2020-08-16
  • PHP中->和=>的含义及使用示例解析

    PHP中->和=>的含义及使用示例解析

    在学习PHP中,遇到了->和=>这两个符号。 刚遇到这两个符号的时候不知道它们代表的含义,在经过百度后才发这两个符号的秘密。 下面来看一下在PHP中->的秘密,如
    2020-08-16
  • PHP基于phpqrcode类生成二维码的方法示例详解

    PHP基于phpqrcode类生成二维码的方法示例详解

    HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址: http://phpqrcode.sourceforge.net/ 下载官网提供的类库
    2020-08-16
  • 基于php伪静态的实现方法解析

    基于php伪静态的实现方法解析

    一直在做php的开发工作.在开发的过程中老早就听说了“伪静态”这一说。但是一直没有对其进行了解。 今天终于下定决定 要好好的了解下这方面的内容。 首先,什么是伪
    2020-08-16

最新评论