jQuery+PHP实现图片上传并提交功能
2020-08-18 04:09
1441 查看
图片上传思路:通过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实现图片上传并提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- jquery+php上传图片截图功能实现
- php+js实现图片的上传、裁剪、预览、提交整个功能
- 一个简单实现了PHP图片上传功能
- php,js实现手机图片上传功能(thinkphp,mobile.js)
- php+js实现图片的上传、裁剪、预览、提交示例
- 使用jQuery插件ajaxFileUpload配合php实现上传图片功能
- php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
- php+js实现图片的上传、裁剪、预览、提交示例
- PHP 中配置 ckeditor(fckeditor的新版本)+ckfinder ,实现上传图片功能。
- php上传图片后 实现压缩图片功能
- php+ajax实现带进度条的上传图片功能【附demo源码下载】
- php+croppic.js实现剪切上传图片功能
- jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
- php+js实现图片的上传、裁剪、预览、提交示例
- thinkphp实现UploadFile.class.php图片上传功能
- php+ajax实现图片文件上传功能
- php基于CodeIgniter实现图片上传、剪切功能
- PHP图片上传功能实现
- php+ajax实现带进度条的上传图片功能【附demo源码下载】
- [PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能