首页
工具导航
友情链接
关于
Search
1
layui+php多文件列表,多图上传,包含表单修改,可适用于laravel框架和tp框架
3,564 阅读
2
设置邮箱头像方法,gravatar头像设置
1,986 阅读
3
百度工具DNS无法解析IP
1,717 阅读
4
在复制codepen代码时踩得坑,three.js实现的特效
1,611 阅读
5
关于本地larvael项目部署到服务器报错Whoops, looks like something went wrong.的问题
1,506 阅读
东扯西扯
网站建站
SEO优化
公众号开发
登录
Search
标签搜索
php
css
laravel
宝塔面板
jQuery
mysql
js
vscode
layui
thinkphp
navicat
轻量应用服务器
seo
gravatar头像
腾讯云
html
多图上传
插件
鼠标指针
网站收录
EzraYes
累计撰写
104
篇文章
累计收到
98
条评论
首页
栏目
东扯西扯
网站建站
SEO优化
公众号开发
页面
工具导航
友情链接
关于
搜索到
45
篇与
网站建站
的结果
2021-05-28
laravel创建中间件
创建中间件 php artisan make:middleware LoginSession在 Kemel.php 文件中中间件添加到局部中间件中
2021年05月28日
400 阅读
0 评论
0 点赞
2021-05-26
laravel视频上传到腾讯云cos对象存储,Phar方式实现开发
申请产品创建存储桶获取访问秘钥访问秘钥在个人信息里的访问管理设置而并非在产品的控制台里根据文档进行sdk开发,下载cos的sdk这一步是我进行开发中遇到的最大的坑,首先我根据官方文档的方式去用composer的方式去下载可是始终下不下来,来来回回折腾了一上午都没搞定,不过文档中还有一个方法: Phar方法根据官方文档下载下来之后把他放在你项目里面,然后用到它的时候引一下就可以了require '/path/to/cos-sdk-v5.phar';我是用laravel进行的开发所以贴出我的代码<?php namespace App\Http\Controllers\Web; use App\Http\Controllers\Controller; use Illuminate\Http\Request; use App\Models\User; use App\Traits\BaseFun; use Qcloud\Cos\Client; class UploadController extends Controller { public function __construct( ) { } private $secretId = "你的密钥"; //"云 API 密钥 SecretId"; private $secretKey = "你的SecretKey"; //"云 API 密钥 SecretKey"; private $region = "默认的存储桶地域"; //设置一个默认的存储桶地域 private $bucket = "你的存储桶"; //存储桶名称 格式:BucketName-APPID private function __cosClient(){ require 'cos/cos-sdk-v5.phar';//你刚才下载的phar路径 return $cosClient = new Client( array( 'schema' => 'http', //协议头部,默认为http 'region' => $this->region, 'credentials'=> array( 'secretId' => $this->secretId , 'secretKey' => $this->secretKey ) ) ); } public function upload(Request $request) { //获取上传的文件 $file = request()->file('file'); //获取储存桶对象 $cosClient = $this->__cosClient(); // dd($file->getRealPath()); //上传 try { $bucket = $this->bucket; //存储桶名称 格式:BucketName-APPID $key = 'video/'."abc".".".$file->getClientOriginalExtension(); //此处的 key 为对象键,对象键是对象在存储桶中的唯一标识 $srcPath = $file->getRealPath();//本地文件绝对路径 $file = fopen($srcPath, 'rb'); if ($file) { $result = $cosClient->Upload( $bucket = $bucket, $key = $key, $body = $file); } // print_r($result); echo $result['Location']; } catch (\Exception $e) { echo "$e\n"; } } } 最后注意你上传的文件权限都是继承的存储桶的权限,如果你的存储桶权限是私有的,那么上传后并不能被别人看见
2021年05月26日
481 阅读
0 评论
0 点赞
2021-05-22
laravel自定义分页的实现案例offset()和limit()
有时候我们写接口并不方便用laravel自带的分页,所以分享一个自定义的分页$pagenNum=request('page'); $limit=request('limit'); $count=Admin::count(); $page=$pagenNum-1; if ($page != 0) { $page = $limit * $page; $limit=$limit*$pageNum; } $data = Admin::offset($page)->limit($limit)->get()->toArray(); return response([ 'code'=>'0', 'msg'=>'', 'count'=>$count, 'data'=>$data]);
2021年05月22日
457 阅读
0 评论
0 点赞
2021-05-14
在复制codepen代码时踩得坑,three.js实现的特效
本文因刷屏广告太多已关闭评论 首先我们先放一下源代码地址 查看演示 这是效果 我们发现通过直接复制粘贴上方三个框里的代码并不能成功运行代码通常会报错这是因为没有引入three.js,导致无法进行后边的内容three.js下载地址 下载地址 本人推荐还是根据这个链接里的网盘下载比较靠谱,而且官网下载贼慢(我是用的百度云试用60秒下载的)下载完之后引入three.js发现还是报错Cannot read property 'ModelBufferGeometry' of undefined这是因为我们并没有完全引完JS代码重新打开我们的演示地址打开f12可以发现我们少引了两部分的js,将他们全部复制引入之后就可以了,不要忘了第二部分script上的id
2021年05月14日
1,611 阅读
0 评论
0 点赞
2021-04-26
layui+php多文件列表,多图上传,包含表单修改,可适用于laravel框架和tp框架
由于大量机器人刷广告本文已经禁止评论 由于本代码PHP上传部分是由PHP代码写得而不是用的框架写得,所以大部分情况可以直接用,有特殊情况的请自行修改。因为要实现增删改查所以文件上传后会赋值到隐藏的input框里代码后台部分: public function upload_images(Request $request)//上传图片,多图上传 { $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']); //移动文件到指定目录 建议文件名自己在修改一下 $img = $folder.'/'.$file['name']; exit(json_encode(array('code'=>0, 'msg'=>$img))); } public function upload_files(Request $request)//文件上传 { $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/files/".date('Y-m-d'); if(!is_dir('.'.$folder)){ mkdir('.'.$folder,0777);//创建年+月的文件夹权限为最高 } $info = move_uploaded_file($file['tmp_name'], '.'.$folder.'/'.$file['name']); //移动文件到指定目录 建议文件名自己在修改一下 $img = $folder.'/'.$file['name']; exit(json_encode(array('code'=>0, 'msg'=>$img))); }可以看到两个方法几乎一样,那是因为当时写的时候只上传图片进行了测试,正常情况下上传文件需要修改判断文件类型那里前端代码: <div class="layui-form-item"> <div class="layui-upload"> <button type="button" class="layui-btn up-button" id="test2">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;height: 142px; width: 75%; margin-left: 25px;"> 预览图: <div class="layui-upload-list" id="demo2" ></div> </blockquote> </div> </div> <div class="layui-form-item"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal up-button" id="testList">选择多文件</button> <div class="layui-upload-list" style="margin-left:25px"> <table class="layui-table"> <thead> <tr><th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr></thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn up-button" id="testListAction">开始上传</button> </div> </div>前端代码(表单修改 我用的laravel): <div class="layui-form-item"> <div class="layui-upload"> <button type="button" class="layui-btn up-button" id="test2">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; height: 142px;"> 预览图: <div class="layui-upload-list" id="demo2" > @if($contentList['images']) @foreach($contentList['images'] as $v) <div style="float: left;"> <img src="{{$v}}" alt="{{$v}}" class="layui-upload-img up-img"> <input type="hidden" name="images[]" value="{{$v}}"> <button onclick="del(this)">x</button> </div> @endforeach @endif </div> </blockquote> </div> </div> <div class="layui-form-item"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal up-button" id="testList">选择多文件</button> <div class="layui-upload-list" style="margin-left:25px"> <table class="layui-table"> <thead> <tr><th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr></thead> <tbody id="demoList"> @foreach($contentList['files'] as $v) <tr> <td>{{$v}}</td> <td>未知</td> <td><span style="color: #5FB878;">已上传</span></td> <td> <button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete" onclick="delfile(this)">删除</button> <input type="hidden" value="{{$v}}" name="files[]"> </td> </tr> @endforeach </tbody> </table> </div> <button type="button" class="layui-btn up-button" id="testListAction">开始上传</button> </div> </div>JS部分: <script> layui.use(['upload','jquery'],function () { $ = layui.jquery; var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test2' ,url: '/managea/upload_images' //改成您自己的上传接口 ,multiple: true ,before: function(obj){ //预读本地文件示例,不支持ie8 // console.log(obj); obj.preview(function(index, file, result){ // $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img up-img">') }); } ,done: function(res){ //上传完毕 $('#demo2').append('<div style="float: left;"><img src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img up-img""><input type="hidden" name="images[]" value="'+res.msg+'""><button onclick="del(this)">x</button></div>'); // $('#demo2').append(''); // $('#demo2').append(''); } }); //常规使用 - 普通图片上传 upload.render({ elem: '#test1' ,url: '/managea/upload_images' //改成您自己的上传接口 ,before: function(obj){ } ,done: function(res){ //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功的一些操作 //…… $('#demoText').html('<img src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img up-img">'); $( "input[name='image']").attr('value',res.msg ) } ,error: function(){ //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); //多文件列表示例 var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#testList' ,url: '/managea/upload_files' //改成您自己的上传接口 ,accept: 'file' ,multiple: true ,auto: false ,bindAction: '#testListAction' ,choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 // console.log(files); //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td>'+ file.name +'</td>' ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>' ,'<td>等待上传</td>' ,'<td>' ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 }); demoListView.append(tr); }); } ,done: function(res, index, upload){ if(res.msg){ //上传成功 var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html('<input type="hidden" name="files[]" value="'+res.msg+'">'); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); }); function del(params) { var index = $("#demo2 button").index(params); $("#demo2 div").eq(index).remove(); } function delfile(params) { var index = $("#demoList button").index(params); $("#demoList tr").eq(index).remove(); } </script>代码太长只展示部分完整版在:文件上传文件上传表单修改
2021年04月26日
3,564 阅读
1 评论
2 点赞
1
...
4
5
6
...
9