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

图片上传思路：通过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实现图片上传的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • PHP+jQuery+Ajax实现多图片上传效果

    PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

  • thinkphp jquery实现图片上传和预览效果

    thinkphp jquery实现图片上传和预览效果

    先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

  • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

    jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

    本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处本站下载. 效果图如下: 实现代码如下: JavaScript代码如下: 复制代码 代码如下: <script type="text/javascript">  $(document).ready(function() {      $("#filelist").niceScroll({          cursor

  • php+flash+jQuery多图片上传源码分享

    php+flash+jQuery多图片上传源码分享

    flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph

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

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

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下 HTML代码 zimg.html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

  • vue+axios实现图片上传识别人脸的示例代码

    vue+axios实现图片上传识别人脸的示例代码

    目录 Axios请求 Qs处理数据分析 Vant上传文件格式 完整代码 本文主要介绍了vue+axios实现图片上传识别人脸的示例代码,分享给大家,具体如下: 先看最终效果: 这里采用的是vant的文件上传组件,通过上传图片后端识别图片里的人脸,返回到前端,获取该人脸匹配的工号或学号.以便后续其他系统使用,比如上传成功了一个人脸照片识别成功,可以通过人脸开启会议室的门禁.目前只是做了一个人脸上传的效果. Axios请求 使用axios请求数据,method:post时,data默认的传参数据类型

  • vue+springboot图片上传和显示的示例代码

    一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目.  是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

  • 用element的upload组件实现多图片上传和压缩的示例代码

    我用vuex做状态管理,七牛云做图床. 项目地址:多图片上传组件 效果展示 项目执行流程 首先,让我们来分析一下实现多图片上传的流程: 前端向后端请求用来上传图片至服务器的token 后端为每张要上传的图片生成一个图片名,并用这个图片名生成token 后端将图片名和token返回给前端 前端拿到token以后,将图片上传至服务器 上传成功以后,前端将图片名发给后端 后端将图片名存入数据库 项目实现过程 1.我们要利用element-ui的Upload组件布置界面: //upload.vue <e

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

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下 HTML代码 zimg.html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

  • 使用jquery.form.js实现图片上传的方法

    本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

    <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］ 一.怎么能放大或者缩小图片的局部?

  • jQuery实现移动端图片上传预览组件的方法分析

    本文实例讲述了jQuery实现移动端图片上传预览组件的方法.分享给大家供大家参考,具体如下: 之前的一篇博客:移动端H5图片预览和压缩,实现了基本的功能.这次则计划做成一个组件,可供前台.后台使用. 首先,我们先来捋一捋想要实现的功能: 预览 删除 压缩 上传到服务器 基本机构 这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() {

随机推荐