2020-10-28
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

本文实例讲述了PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作。分享给大家供大家参考,具体如下: 2019-07-04更新 更新修改原因: 前台界面ui显示不好看 后台处理逻辑混乱,涉及到多张图片处理起来很麻烦,所以修改成通过ajax上传/删除图片。 以下是更新的代码: HTML 代码: <div class="form-group"> <label for="username" class="col-sm-2 control-label no-padding-right">缩略图 </label> <div class="col-sm-6"> <input type="hidden" id="pic" value="" name="pic"> <!-- 要将父布局的position设置为relative,父布局将无法包裹input --> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-palegreen" style="position: relative;margin-right: 10px;" id="xian"> <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 --> <!-- 设置opactity为0,使input变透明 --> <input type="file" name="pic" accept="image/*" style="opacity: 0;position: absolute">上传图片</a> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-magenta" onclick="delimg(this)" style="display: none" id="che">撤销图片</a> </div> </div> 要点: 重点都在注释里了。 参考: JS+HTML实现自定义上传图片按钮并显示图片 JS 代码: //上传图片 //对input[type=file]监听 $("input[name=pic]").on('change',function () { var e=$(this); var file=e[0].files[0]; var formData=new FormData(); formData.append("pic",file);//这里给图片赋的name要与下面php中接收的post值对应 $.ajax({ url: "{:url('upimg')}", type:'POST', cache: false, //上传文件不需要缓存 data:formData, processData: false, // 告诉jQuery不要去处理发送的数据(规定通过请求发送的数据是否转换为查询字符串。默认是 true。) contentType: false, // 告诉jQuery不要去设置Content-Type请求头(发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。) success:function (data) { if (data){ $("#xian").hide(); $("#che").show(); $("#pic").val(data); e.parents(".col-sm-6").append("[外链图片转存失败(img-wg119lWd-1562224226091)(https://mp.csdn.net/mdeditor/%22+data+%22)]"); layer.msg('上传成功', {icon: 6}) } else{ layer.msg('上传失败', {icon: 5}) } } }) }) //删除图片 function delimg(e) { layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){ //do something var id="{$article.id}"; var imgpath = $(e).siblings('img:last').attr('src'); $.ajax({ url:"{:url('delimg')}", type:'post', data: {pic:imgpath}, success:function (data) { if(data){ $("#xian").show(); $("#che").hide(); $("#pic").val(""); $(e).siblings('img').hide(); layer.msg('删除成功', {icon: 6}) }else{ layer.msg('删除失败', {icon: 5}) } } }) layer.close(index); }); } 这里有句代码展示有问题,源码如下: 要点 : JS formDate的使用 上传成功后返回图片路径,塞到input[type=hidden]框里,之后会随着表单提交上去,保存在数据库中。 参考: JavaScript实现图片上传并预览并提交ajax PHP 代码: //ajax上传图片 public function upimg() { $file = request()->file('pic');//这里接收到的图片name要与上面js中formData赋值对应 if ($file) { $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'articleimg'); $imgpath = '/uploads/articleimg/' . $info->getSaveName(); return $imgpath; }else{ return 0; } } //ajax删除图片 public function delimg() { $data = input('post.'); if ($pic = $data['pic']) { $imppath = ROOT_PATH . 'public' . $pic; if (@unlink($imppath)) { //这里要对数据库中的Pic字段进行即时修改。嗯嗯 $re=db('article')->where('id', $data['id'])->setField('pic', ''); if ($re!==false){ return 1; } } else { return 0; } } else { return '参数错误'; } } 分割线(下面是前几天写的答案,逻辑混乱。。。就不要看了吧) 前台处理: 添加一个<input type="hidden" value="" name="pic">,会随着post一起提交到后台中去。 后台处理分为两步 收到的post数据data中pic字段值为空时,且该栏目之前有图片,则执行删除原来图片操作; 如果上传了新图片,则移动到指定目录下,并查询该栏目之前是否有图片,如果有,则执行删除原来图片操作; html代码 <div class="form-group"> <label for="username" class="col-sm-2 control-label no-padding-right">栏目图片</label> <div class="col-sm-6"> <input type="hidden" name="pic" value="{$ca.pic}" id="pic"> <input type="file" id="file" accept="image/*" name="pic" style="display: inline-block"> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-warning shiny" id="returnimg"><i class="menu-icon fa fa-repeat"></i>撤销图片</a> {notempty name='$ca.pic'} <img src="{$ca.pic}" alt="图片" id="img" style="width: 50px;margin-top:10px;display: block"> {else/} <img src="" alt="图片" id="img" style="width: 50px;margin-top:10px;display: none"> {/notempty} </div> </div> js代码 <script> //图片撤销 $("#returnimg").on('click', function () { let img = $("#img").attr('src'); if (img) { layer.confirm('确定撤销图片?', {icon: 3, title: '提示'}, function (index) { $("#pic").val(""); $("#img").attr('src', '').css('display', 'none'); layer.close(index); }); } else { layer.msg('未选择图片', {icon: 0}); } }) </script> php代码 //1.如果栏目原来有图片&&现在撤销了,就删除旧图片 if (($cate['pic'] != false) && ($data['pic'] == false)) { @unlink(ROOT_PATH . 'public' . $cate['pic']); } //如果上传了新的图片 $file = request()->file('pic'); // 移动到框架应用根目录/public/uploads/ 目录下 if ($file) { $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'cateimg'); if ($info) { // 成功上传后 获取上传信息 $pic = '/uploads/cateimg/' . $info->getSaveName(); $data['pic'] = $pic; //2.新的图片上传成功后,如果栏目原来有图片,删除原来栏目图片 if ($cate['pic']) { @unlink(ROOT_PATH . 'public' . $cate['pic']); } } else { // 上传失败获取错误信息 $this->error($file->getError()); } } 更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》 希望本文所述对大家PHP程序设计有所帮助。 ...
技术教程 840次浏览 0条评论
2020-10-28
php+ajax实现文件切割上传功能示例

php+ajax实现文件切割上传功能示例

本文实例讲述了php+ajax实现文件切割上传功能。分享给大家供大家参考,具体如下: html5中的File对象继承Blob二进制对象,Blob提供了一个slice函数,可以用来切割文件数据。 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form method="post" id="myForm"> <input type="file" name="file" id="upfile" /> <input type="submit" name="submit" value="提交" /> </form> <div id="upStatus"></div> </body> <script type="text/javascript"> var myForm = document.getElementById("myForm"); var upfile = document.getElementById("upfile"); myForm.onsubmit = function() { //获取文件对象 var file = upfile.files[0]; //获取文件大小 var fileSize = file.size; //一次截取的大小(字节) var CutSize = 1024 * 1024 * 10; //开始截取位置 var CutStart = 0; //结束截取位置 var CutEnd = CutStart + CutSize; //截取的临时文件 var tmpfile = new Blob(); while(CutStart < fileSize) { tmpfile = file.slice(CutStart, CutEnd); //我们创建一个FormData对象 var fd = new FormData(); //把文件添加到FormData对象中 fd.append("file", tmpfile); var xhr = new XMLHttpRequest(); //这里使用同步 xhr.open("post", "upfile.php", false); //上传进度 console.log(Math.round( (CutStart + tmpfile.size) / fileSize * 100) + "%"); //发送FormData对象 xhr.send(fd); //重新设置截取文件位置 CutStart = CutEnd; CutEnd = CutStart + CutSize; } return false; }; </script> </html> upfile.php代码如下: <?php $uploadDir = './upload/'; if(!file_exists($uploadDir)) { @mkdir($uploadDir, 0777, true); } $uploadFile = $uploadDir . basename($_FILES['file']['name']); if(!file_exists($uploadFile)) { //如果文件不存在 move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile); } else { //如果文件已存在,追加数据 file_put_contents($uploadFile, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND); } 更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》 希望本文所述对大家PHP程序设计有所帮助。...
技术教程 670次浏览 0条评论
2020-10-28
PHP下ajax跨域的解决方案之jsonp实例分析

PHP下ajax跨域的解决方案之jsonp实例分析

本文实例讲述了PHP下ajax跨域的解决方案之jsonp。分享给大家供大家参考,具体如下: 首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式。 var person = { "name": "test", "age": "25", "sex": "男" }; var data = [1, 2, 3, 4, 5]; 而jsonp是一种非官方跨域数据交互协议,该协议允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。 比如我在a.com的网站上引用了b.com的一个b.js,但这样跨域的引用并不会产生错误,说明调用js文件时不受跨域的影响。 <script type="text/javascript" src="http://www.b.com/b.js"></script> 那么我们在b.js里添加如下代码,看看是否能够执行 alert("I from b"); 确定是可以执行。 那么如果我们在a.com上自已创建一个js函数,而在b.com下的b.js中调用,那是否可行呢? a.com下的index.html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function a(data) { alert("I from a \r\n" + "data:" + data); } </script> <script type="text/javascript" src="http://www.b.com/b.js"></script> </body> </html> b.com下的b.js如下: a("from b"); 上面也是可以执行的,我们可以看到在b.js中的数据确实正确的传到了函数a中。 问题又来了,a.com中创建的函数名与b.js中调用的函数名必须一致,那么如何才能让b.com服务端知道这个函数名,只有通过地址栏来传递了,加上一个callback=函数名来传递。当然callback这个命名可以改,但大家都这么命名,也就约定俗成了。 a.com下的index.html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> function a(data) { alert("uid :" + data.uid + "name :" + data.name); } </script> <!-- 注意这里把b.js改成b.php了 --> <script type="text/javascript" src="http://www.b.com/b.php?callback=a"></script> </body> </html> b.com下的b.php如下: <?php $callback = !empty($_GET['callback']) ? trim($_GET['callback']) : ''; if(!empty($callback)) { $data = json_encode(array( 'uid' => 1, 'name' => '测试', )); echo "{$callback}({$data});"; } 上面也是可以执行的,知道了回调函数名,b.com服务端处理好数据,然后通过字符串拼接输出。 jquery中就已经提供了jsonp的支持,a.com下的index.html如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="info"></div> <script type="text/javascript" src="http://www.b.com/jquery.js"></script> <script type="text/javascript"> $.ajax({ dataType: "jsonp", url: "http://www.b.com/b.php", jsonp: "callback", success: function(data) { $(".info").text("uid:" + data.uid + " name:" + data.name); } }); </script> </body> </html> 跨域策略限制情况表如下: URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不同协议 不允许 http://www.a.com/a.js http://127.0.0.100/b.js 域名和域名对应ip 不允许 http://www.a.com/a.js http://script.a.com/b.js 主域相同,子域不同 不允许 http://www.a.com/a.js http://a.com/b.js 同一域名,不同二级域名(同上) 不允许 http://www.a.com/a.js http://www.b.com/b.js 不同域名 不允许 更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》 希望本文所述对大家PHP程序设计有所帮助。...
技术教程 610次浏览 0条评论
2020-10-28
PHP ajax跨子域的解决方案之document.domain+iframe实例分析

PHP ajax跨子域的解决方案之document.domain+iframe实例分析

本文实例讲述了PHP ajax跨子域的解决方案之document.domain+iframe。分享给大家供大家参考,具体如下: 对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果。 例如:我们有两个域名:www.a.com 和 img.a.com 在www.a.com下有a.html 在img.a.com下有img.json和img.html这两个文件。 img.json就是一些我们要获取的数据: [ { "name" : "img1", "url" : "http://img.a.com/img1.jpg" }, { "name" : "img2", "url" : "http://img.a.com/img2.jpg" } ] img.html就是我们iframe要引用的: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script src="./jquery.js"></script> <script type="text/javascript"> document.domain = "a.com"; var p = parent.window.$; p("#sub").text("我是子页面添加的"); </script> </body> </html> a.html就是要通过跨子域获取数据的页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 通过跨域获取数据,并添加到ul中 --> <ul id="data"></ul> <!-- 子页面通过parent.window来访问父页面 --> <div id="sub"></div> <!-- 通过iframe引用img.a.com下的img.html --> <iframe id="iframe" src="http://img.a.com/img.html"></iframe> <script src="./jquery.js"></script> <script type="text/javascript"> document.domain = "a.com"; $("#iframe").bind("load", function() { //获取子页面的jquery对象 iframe = document.getElementById("iframe").contentWindow.$; iframe.getJSON("http://img.a.com/img.json", function(data) { var con = ""; //注意这里的$对象是www.a.com上的 $.each(data, function(i, v) { con += "<li>" + v.name + ":" + v.url + "</li>"; }); $("#data").html(con); }); }); </script> </body> </html> a.html中我们通过contentWindow.$来获取子页面的jquery对象,然后通过getJSON获取数据,并通过www.a.com上的$对象把数据写入到ul中。 在子页面img.html中我们通过parent.window来访问父页面的$对象,并操作元素添加数据。 更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》 希望本文所述对大家PHP程序设计有所帮助。...
技术教程 1220次浏览 0条评论
2020-10-28
PHP下ajax跨域的解决方案之window.name实例分析

PHP下ajax跨域的解决方案之window.name实例分析

本文实例讲述了PHP下ajax跨域的解决方案之window.name。分享给大家供大家参考,具体如下: 原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。 依此原理,我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给 window.name,页面A的iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。 例:有两个网站www.a.com和www.b.com,我们要在www.a.com/a.html下获取www.b.com/data.html数据。 我们需要三个文件: www.a.com 下的 a.html 获取数据并显示 www.b.com 下的data.html 提供数据 www.a.com 下的proxy.html 代理文件,与a.html同一域下,一般为空html文件。 www.b.com下的data.html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> //添加需要传递的数据,大小一般为2M,IE和firefox下可以大至32M左右 window.name = '[{"name":"test1"},{"name":"test2"}]'; </script> </body> </html> www.a.com下的proxy.html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 空的html文件 --> </body> </html> www.a.com下的a.html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 用于引用www.b.com/data.html文件 --> <iframe id="iframe" src=""></iframe> <!-- 显示获取到的数据 --> <div id="data"></div> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript"> var ifr = document.getElementById("iframe"); ifr.src = "http://www.b.com/data.html"; if (ifr.attachEvent) { ifr.attachEvent("onload", loadfunc); } else { ifr.onload = loadfunc; } var state = 0; function loadfunc() { if(state == 0) { state = 1; ifr.contentWindow.location = "http://www.a.com/proxy.html"; } else { var data = ifr.contentWindow.name; $.each($.parseJSON(data), function(i, v) { $("#data").append(v.name); }); //销毁iframe,保证安全 ifr.contentWindow.document.write(""); ifr.contentWindow.close(); document.body.removeChild(ifr); } } </script> </body> </html> 更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》 希望本文所述对大家PHP程序设计有所帮助。...
技术教程 650次浏览 0条评论
2020-10-28
php + ajax 实现的写入数据库操作简单示例

php + ajax 实现的写入数据库操作简单示例

本文实例讲述了php+ ajax 实现的写入数据库操作。分享给大家供大家参考,具体如下: 这个是最简单的表单提交  延伸:后面有很多需要提交的信息 如何快速部署接口 此例子是移动端H5页面,使用的是zepto.min.js  HTML <input class="name" type="text" placeholder="请输入您的姓名" id="name"> <input class="tel" type="text" placeholder="请输入您的手机号码" id="tel"> <span class="button_tijiao" id="form_tijiao"><img src="images/page8/button.png"></span> 前端页面JS 不跨域的情况下 <script type="text/javascript"> $('#form_tijiao').click(function () { var name =$('#name').val(),tel=$('#tel').val(); if(name=='' && tel ==''){ alert("请检查是否输入姓名和电话!!!") } $.ajax({ type:'post', url:'http://www.netnic.com.cn/formapi/form_qishangh5.php', data:{name:name,tel:tel}, success:function (data, status, xhr) { alert('提交成功!请等候工作人员联系!') }, error:function (xhr, errorType, error) { } }) }) </script> 后端PHP页面 注意不要跨域 1.这里接收前端数据 $_POST[name],$_POST[tel],post传送过来,这里需要过滤数据是否正常 需要:                      ①过滤数据 √ ②数据唯一性检测(手机号唯一) √ ③php生成当前写入时间(时间戳格式) √ ④如何返回结果给前端(返回字符串或者是json数据) √ ⑤手机号格式验证(正则匹配验证) √                                                                                                                                                                 ⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 2.链接数据库   1)mysql_connect('localhost','数据库用户名','数据库密码'),连接数据库 2)选择数据库 mysql_select_db('数据库名称',数据库链接上一步) 3)数据库时区设置 测试环境php5.2.6 ,在头部添加  ini_set('date.timezone','Asia/Shanghai'); 测试可行;网上说的 date_default_timezone_set('PRC');并没有效果;不知道哪里有问题;  参考资料: date_default_timezone_set()设置时区 <?php ini_set('date.timezone','Asia/Shanghai'); $con = mysql_connect("localhost","admin","qishangxiangyunnetnic20160407"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("qishang_form", $con); $time = date('Y-m-d H:i:s',time()); $sql="INSERT INTO netnich5 (name, tel_number,posttime) VALUES ('$_POST[name]','$_POST[tel]','$time')"; if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } echo "1 record added"; ?> 1.问题:Notice: Use of undefined constant callback - assumed 'callback' 解决: 在每个文件头上加 error_reporting(0); sql语句清理表数据  1.全部清理表中数据,不删除表 TRUNCATE TABLE 表名 跨域jsonp解决方案 最简单jsonp实例  附:jsonp jquery接收和原生JS接收 客户端返回实例: 后台接收回调函数callback  ,函数的参数 就是json的数据 callback( {username: "", is_login: false} ); $(document).ready(function(){ $.ajax({ /*url:'http://172.16.69.220:8100/get_user/',*/ url:'http://192.168.1.72:8002/get_user/', type:'get', dataType:'jsonp', jsonp:'callback', processData: false, jsonpCallback:'flightHandler', success:function (json) { alert("数据成功返回") console.log(json.is_login); console.log(json); } }); }); 更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》 希望本文所述对大家PHP程序设计有所帮助。 ...
技术教程 720次浏览 0条评论
2020-10-27
PHP Ajax跨域问题解决方案代码实例

PHP Ajax跨域问题解决方案代码实例

本文通过设置Access-Control-Allow-Origin来实现跨域。 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。 如果直接使用ajax访问,会有以下错误: XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access. 1、允许单个域名访问 指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码: header('Access-Control-Allow-Origin:http://client.runoob.com'); 2、允许多个域名访问 指定多个域名(http://client1.runoob.com、http://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码: $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array( 'http://client1.runoob.com', 'http://client2.runoob.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); } 3、允许所有域名访问 允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码: header('Access-Control-Allow-Origin:*'); 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持梦主博客。...
技术教程 690次浏览 0条评论
微信二维码