jQuery+PHP实现图片上传并提交功能
这篇文章主要介绍了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 > 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 ); } |
最后实现效果如下:
ps:js代码是使用jQuery的写法,需引入jQuery代码库文件
到此这篇关于jQuery加PHP实现图片上传并提交实现详解的文章就介绍到这了