个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery+PHP实现图片上传并提交功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台PHP，代码如下 。

HTML代码 zimg.html文件:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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实现图片上传并提交内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://www.cnblogs.com/camg/p/13306633.html 。

最后此篇关于jQuery+PHP实现图片上传并提交功能的文章就讲到这里了,如果你想了解更多关于jQuery+PHP实现图片上传并提交功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： phpStudy vscode 搭建debug调试的教程详解
文章推荐： 一文弄懂C语言如何实现单链表
文章推荐： C++哈希应用的位图和布隆过滤器
文章推荐： 关于PHP中interface的用处详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com