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

吾爱主题阅读：219 2021-10-20 13:40:00 评论：0

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