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

 更新时间:2020年07月27日 16:21:46   作者:在斑马线上散布  
这篇文章主要介绍了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实现图片上传并提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • PHP 数组学习排序全接触

    PHP 数组学习排序全接触

    PHP4函数手册 array里的算是看完咯, 明天在看看最新的手册。。。。
    2009-08-08
  • php使用crypt()函数进行加密

    php使用crypt()函数进行加密

    这篇文章主要为大家详细介绍了php使用crypt()函数进行加密,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 深入extjs与php参数交互的详解

    深入extjs与php参数交互的详解

    本篇文章是对extjs与php的参数交互进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • 两种php实现图片上传的方法

    两种php实现图片上传的方法

    这篇文章主要为大家介绍了两种php实现图片上传的方法,利用form表单上传,另一种方法是利用uploadify实现无刷新并且带进度条的上传,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • PHP可逆加密/解密函数分享

    PHP可逆加密/解密函数分享

    很多项目的会员系统,都要求要有记住登录功能,在通过cookies实现功能是,由于要将客户信息直接保存到cookies,如果直接写入cookies势必会带来安全隐患,因此通过可逆加密后再保存到cookies相对就安全了
    2012-09-09
  • PHP排序算法的复习和总结

    PHP排序算法的复习和总结

    对于PHP中对数组的元素进行排序,这个是很经常用到的,之前的项目中也有,而且对于几种排序我们都是用的是asort arsort 等PHP原生函数,没有自己去实现,所以就对一下的几个函数进行总结,这个会不断的进行补充,自己也可以好好的复习和总结
    2012-02-02
  • PHP重定向与伪静态区别

    PHP重定向与伪静态区别

    伪静态是SEO重要的方法,通过重定向来实现,并且可以通过重定向来隐藏网站的技术,过滤异常访问。本课分为两部分,前半部分详细介绍Apache重定向的基础知识,后半部分通过多个实际案例再次加深对重定向的理解,并且会演示各种重定向设置后的实际效果。
    2017-02-02
  • PHP实现的多维数组排序算法分析

    PHP实现的多维数组排序算法分析

    这篇文章主要介绍了PHP实现的多维数组排序算法,结合实例形式对比分析了php针对多维数组及带有键名的多维数组进行排序相关操作技巧与注意事项,需要的朋友可以参考下
    2018-02-02
  • PHP 引用是个坏习惯

    PHP 引用是个坏习惯

    在写PHP 程序的时候,很多人在传递参数的时候,喜欢用一个引用。特别是在一个数组非常的大的时候,更是喜欢加。
    2010-03-03

最新评论