首页
工具导航
友情链接
关于
Search
1
layui+php多文件列表,多图上传,包含表单修改,可适用于laravel框架和tp框架
3,517 阅读
2
设置邮箱头像方法,gravatar头像设置
1,903 阅读
3
百度工具DNS无法解析IP
1,702 阅读
4
在复制codepen代码时踩得坑,three.js实现的特效
1,595 阅读
5
关于本地larvael项目部署到服务器报错Whoops, looks like something went wrong.的问题
1,366 阅读
东扯西扯
网站建站
SEO优化
公众号开发
登录
Search
标签搜索
php
css
laravel
宝塔面板
jQuery
mysql
js
vscode
layui
thinkphp
navicat
轻量应用服务器
seo
gravatar头像
腾讯云
html
多图上传
插件
鼠标指针
网站收录
EzraYes
累计撰写
104
篇文章
累计收到
47
条评论
首页
栏目
东扯西扯
网站建站
SEO优化
公众号开发
页面
工具导航
友情链接
关于
搜索到
7
篇与
jQuery
的结果
2021-07-12
jQuery+html+css实现选项卡功能
直接上代码<div class="page-header float-right"> <div class="page-title"> <ol class="breadcrumb text-right"> <li onclick="changeTab(this,'chicang')" class="hide"><a href="#">持仓信息</a></li> <li onclick="changeTab(this,'xianjia')" class="active"><a href="#">限价委托</a></li> <li onclick="changeTab(this,'jihua')" class="hide"><a href="#">计划委托</a></li> </ol> </div> </div>/** *选项卡切换 */ function changeTab(a,type){ //获取选项卡状态,获取选中选项卡状态,更改选项卡状态,切换选项卡对应div的显示隐藏 var myli = jQuery(a).parent().children();//获取同级的所有元素 var sort = jQuery(a).index();//获取选中元素排第几个 //除了选中的其他都变隐藏,先全部变隐藏然后为选中的div更改样式 jQuery(".card").css('display','none'); switch (type) { case 'chicang': jQuery(".chicang").css('display','flex'); break; case 'xianjia': jQuery(".xianjia").css('display','flex'); break; case 'jihua': jQuery(".jihua").css('display','flex'); break; default: break; } console.log(myli); for (let index = 0; index <= myli.length; index++) { if(index != sort){//不是被选中的清除active添加hide // console.log(index+'-z-'+sort); jQuery(myli[index]).removeClass("active"); jQuery(myli[index]).addClass("hide"); //显示对应的div }else{//是被选中的添加active清除hide // console.log(index+'-x-'+sort); jQuery(myli[index]).removeClass("hide"); jQuery(myli[index]).addClass("active"); //显示对应点div } } // console.log(jQuery(a).index()); }
2021年07月12日
289 阅读
0 评论
0 点赞
2021-06-29
jQuery获取复选框选中状态
有时候我们在使用复选框的时候会发现复选框选中了,但是input元素里却没有checked状态,因此在jQuery我们并不能获取到对应复选框选中的值var arr = new Array(); $("input[name='kaiguan']:checkbox[checked]").each(function(i){ arr[i] = $(this).val(); });因此使用上面的代码并不能很好的获取到值var arr = new Array(); jQuery("input[name='kaiguan']").each(function(i){ if (jQuery(this).is(':checked')) { arr.push(jQuery(this).val()); } }所以改用这个
2021年06月29日
234 阅读
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,517 阅读
1 评论
2 点赞
2021-04-23
通过jQuery向div或子div增加class
$(".mui-off-canvas-wrap").addClass("hy"); $(".menu-list a").eq(1).children('.menu-row').addClass("selectMenu");
2021年04月23日
282 阅读
0 评论
0 点赞
2021-04-23
layui+php多图上传
layui图片上传可以一次性选择多个图片,然后选择多少张调用多少次上传接口设计思路:前端上传文件到后台,后台接收保存成功后返回图片路径,前端根据路径生成div,div包括img标签、隐藏的input(表单传值用)、删除按钮,点击删除按钮判断是第几个删除按钮并删除对应的标签前端页面: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多图上传</title> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> <style> .up-img{ width: 100px; height: 100px; } #demo2 div button{ position: relative; top: -38px; left: -13px; } </style> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>上传多张图片</legend> </fieldset> <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; height: 142px;"> 预览图: <div class="layui-upload-list" id="demo2" ></div> </blockquote> </div> </body> <script> layui.use(['upload','jquery'],function () { $ = layui.jquery; var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test2' ,url: 'upload1.php' //改成您自己的上传接口 ,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" onclick="showeq(this)"><input type="hidden" name="image[]" value="'+res.msg+'" onclick="showinput(this)"><button onclick="del(this)">x</button></div>'); // $('#demo2').append(''); // $('#demo2').append(''); } }); }); function showeq(params) { var index = $("#demo2 img").index(params); console.log(index); } function showinput(params) { var index = $("#demo2 input").index(params); console.log(index); } function del(params) { var index = $("#demo2 button").index(params); $("#demo2 button").eq(index).remove(); $("#demo2 input").eq(index).remove(); $("#demo2 img").eq(index).remove(); // console.log(index); } </script> </html>php代码<?php $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'=>'上传图片不合法'))); } $info = move_uploaded_file($file['tmp_name'], "./uploads/".$file['name']); //移动文件到指定目录 建议文件名自己在修改一下 $img = '/uploads/'.$file['name']; exit(json_encode(array('code'=>0, 'msg'=>$img))); ?>
2021年04月23日
190 阅读
0 评论
0 点赞
1
2