jQuery加PHP实现图片上传并提交
Posted 在斑马线上散布
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现图片上传并提交的主要内容，如果未能解决你的问题，请参考以下文章