首页
工具导航
友情链接
关于
Search
1
layui+php多文件列表,多图上传,包含表单修改,可适用于laravel框架和tp框架
2,426 阅读
2
设置邮箱头像方法,gravatar头像设置
1,516 阅读
3
在复制codepen代码时踩得坑,three.js实现的特效
1,329 阅读
4
百度工具DNS无法解析IP
1,300 阅读
5
关于本地larvael项目部署到服务器报错Whoops, looks like something went wrong.的问题
989 阅读
东扯西扯
网站建站
SEO优化
公众号开发
登录
Search
标签搜索
php
css
laravel
宝塔面板
jQuery
mysql
js
vscode
layui
thinkphp
navicat
轻量应用服务器
seo
gravatar头像
腾讯云
html
多图上传
插件
鼠标指针
网站收录
EzraYes
累计撰写
102
篇文章
累计收到
6
条评论
首页
栏目
东扯西扯
网站建站
SEO优化
公众号开发
页面
工具导航
友情链接
关于
搜索到
62
篇与
东扯西扯
的结果
2021-03-09
分享一个后台多图上传的例子
注意form表单要填写enctype="multipart/form-data"前台html: <div class=" clearfix cl"> <label class="form-label col-2">图片:</label> <div class="role" onclick="file(this)"> <img src="" alt="" id="goods_1" class="file" > <span style="color: #ccc;">上传图像</span> <input type="file" name="goods_imgs[]" class="file" value="" id="goods1" onchange="le(this)"> </div> <div class="role" style="display: none" onclick="file(this)"> <img src="" alt="" id="goods_2" class="file" > <span style="color: #ccc;">上传图像</span> <input type="file" name="goods_imgs[]" class="file" value="" id="goods2" onchange="le(this)"> </div> <div class="role" onclick="copy(this)"> <span style="color: #ccc;">+</span> </div> <!-- <input type="file" name="img" class="file" value="" > --> </div>js: <script type="text/javascript"> //点击圆框时上传图片 function file(evn) { var img_obj = $(evn).children(".file") var file_id = $(img_obj[1]).attr("id") document.getElementById(file_id).click() } //点击时复制角色框 function copy(evn) { var obj = $(evn).prev(); var num = $(".role").length console.log(num) $(obj).clone().insertBefore(evn); $(obj).css("display","block") var img_obj = $(obj).children(".file") console.log(img_obj) var img_id = $(img_obj[0]).attr("id","goods_"+num) var file_id = $(img_obj[1]).attr("id","goods"+num) } //左侧图像点击时显示图像 function le(evn){ var id = $(evn).attr('id');//获取id var num = "goods_"+id.substr(5,1); var file = event.target.files[0]; if (window.FileReader) { var reader = new FileReader(); reader.readAsDataURL(file); //监听文件读取结束后事件 reader.onloadend = function (e) { var divObj= $(evn).prev() //获取div的DOM对象 $(divObj).html("") //插入文件名 $("#"+num).css("display","block"); $("#"+num).attr("src",e.target.result); //e.target.result就是最后的路径地址 }; } } </script>后台接收数据: public function upload_images(Request $request)//上传图片,多图上传 { $char=$this->random_string(16); $file = $_FILES["file"]; if ($file==null) { exit(json_encode(array('code'=>1, 'msg'=>'未上传图片'))); } // 获取文件后缀 $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); // 判断文件是否合法 if(!in_array($extension, array("gif","jpeg","jpg","png"))){ exit(json_encode(array('code'=>1, 'msg'=>'上传图片不合法'))); } //创建文件夹获取当前年月日 $folder="/mstyle/upload/images/".date('Y-m-d'); if(!is_dir('.'.$folder)){ mkdir('.'.$folder,0777);//创建年+月的文件夹权限为最高 } // $info = move_uploaded_file($file['tmp_name'], '.'.$folder.'/'.$file['name']); //移动文件到指定目录 建议文件名自己在修改一下 $info = move_uploaded_file($file['tmp_name'], '.'.$folder.'/'.$char.'.'.$extension); //移动文件到指定目录 建议文件名自己在修改一下 // dd($extension); $img = $folder.'/'.$char.'.'.$extension; // exit(json_encode(array('code'=>0, 'msg'=>$img))); $res=['imgurl'=>$img]; $ArrDate = ['code' => 0, 'data' => $res, 'token' => $request->input('token')]; return BaseFun::jsonReturn($ArrDate); } function random_string($length) { $key = ''; $keys = array_merge(range(0, 9), range('a', 'z')); for ($i = 0; $i < $length; $i++) { $key .= $keys[array_rand($keys)]; } return $key; }
2021年03月09日
163 阅读
0 评论
0 点赞
2021-03-08
网站禁止复制
<script> document.onkeydown = function(e){ var e=e||event; if (e.ctrlKey==1 && e.keyCode==67){ return false; } }//防止ctrl+C document.body.oncopy = function (){return false;} //阻止复制 </script> <script> document.body.onselectstart=document.body.oncontextmenu=function(){return false;};</script>
2021年03月08日
202 阅读
0 评论
0 点赞
2021-03-02
简单的订单详情页面样式
有时候我们网站的后台会需要展示某些数据的详情,但又不想整的过于复杂,今天推荐一个简单的订单详情样式style代码:.aui-flex-box h1 { color: #333; font-size: 1.1rem; margin-bottom: 0.3rem; } .aui-flex-box h2 { color: #ef8015; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 500; } .aui-flex-box h3 { color: #333; font-size: 1rem; margin-bottom: 0.2rem; font-weight: 500; } .aui-flex-box p { color: #8c8c8c; font-size: 0.85rem; margin-bottom: 0.2rem; font-weight: normal; } .aui-flex-box span em { background: #f3f4f8; border-radius: 3px; font-size: 0.75rem; font-style: normal; color: #666666; padding: 0.2rem 0.3rem; } .aui-six-item { overflow: hidden; } .aui-six-item span { width: 50%; display: block; float: left; height: 1.8rem; line-height: 1.8rem; font-size: 0.85rem; } .aui-six-item span em { background: none; color: #999999; font-size: 0.85rem; padding-right: 2rem; } body代码:<div class="aui-flex"> <div class="aui-flex-box"> <div class="aui-six-item"> <span><em>订 单 号 :</em>{{$info['order_number']}}</span> <span><em>商 品 名 :</em>{{$info['goods_name']}}</span> <span><em>规 格:</em>{{$info['details']}}</span> <span><em>规格数量:</em>{{$info['mark_num']}} </span> <span><em>购买数量:</em>{{$info['number']}}</span> <span><em>商品单价:</em>{{$info['price']}}</span> <span><em>姓 名:</em>{{$info['name']}}</span> <span><em>手 机 号 :</em>{{$info['phone']}}</span> <span><em>收货地址:</em>{{$info['address']}}</span> <span><em>订单总金额:</em>{{$info['total_money']}}</span> <span><em>描 述:</em>{{$info['des']}}</span> </div> </div></div>
2021年03月02日
186 阅读
0 评论
0 点赞
2021-02-24
用css写一个这样的div
先看效果:css部分:<style> body{ background-color: pink; } .box1{ width: 100px; height: 100px; background:white; position: relative; margin: 30% auto; border-radius :50%; box-shadow: 15px 14px 17px 17px rgba(0, 0, 0, 0.2); } .box2{ width: 30px; height: 100px; background-color:white; border-radius: 50%; position: absolute; top: 0; left: 80px; } .box3{ width: 30px; height: 100px; background-color:white; border-radius: 50%; position: absolute; top: 0; right: 80px; } .box4{ width: 100px; height: 30px; background-color:white; border-radius: 50%; position: absolute; top: 80px; } .box5{ width: 100px; height: 30px; background-color:white; border-radius: 50%; position: absolute; bottom: 80px; } </style> body部分:<div class="box1"> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div>
2021年02月24日
182 阅读
0 评论
0 点赞
2021-02-19
设置邮箱头像方法,gravatar头像设置
gravatar头像是全球通用的大头贴头像,如果在Gravatar的服务器上放置了你自己的头像,那么在任何支持Gravatar的blog或者留言本上留言时,只要提供你与这个头像关联的email地址,就能够显示出你的Gravatar头像。比如qq邮箱就支持Gravatar头像:以及typecho的后台:那么如何才能设置Gravatar头像呢?非常简单!首先百度gravatar,第一个就是他们的官网。点击页面中的Create Your Own Gravatar按钮,跳转到注册页面,输入你的Email、用户名、登录密码。其间有些要求,比如邮箱地址如果注册过了会红字提示,用户名只能是4个字符以上的小写字母否则红字提示等等,注意修改符合要求即可。点击Sign Up按钮,接下来的页面中如果出现We sent you a confirmation email!这些字样,那就说明你的提交有效。二、进入你的邮箱,查收Activate XXX的邮件,点击邮件中的Activate Account链接,跳出的页面显示Your WordPress.com account has been activated!表明你的账号注册成功并激活了。三、点击页面中的登录按钮,或者重新打开Gravatar网站点击右上角的Sign In按钮,接下来用你刚才注册的Email地址和密码登录,然后点击Add a new image链接,然后就通过上传图片(Upload new)或者使用在线图片(From url)等功能来设置与你Email地址绑定的头像了。四、上传完图片,会有页面让你裁剪你的图片,即设置头像显示哪一部分,拖动框体即可。五、之后的页面是让你选择你图片,直接选择G评级(通用型),这样大多数网站就可以显示你的头像。六、可能需要站方短暂审核一下,一般如果选择评级G,而你的图片没什么特别的,很快就会通过。遇上慢的情况一般也就十分钟左右。
2021年02月19日
1,516 阅读
0 评论
0 点赞
1
...
11
12
13