前端页面
文件名 | 大小 | 上传进度 | 操作 |
---|
前端页面
文件名 | 大小 | 上传进度 | 操作 |
---|
js
//演示多文件列表
var navArr=[];
var uploadListIns = upload.render({
elem: ‘#testList’
,elemList: $(‘#demoList’) //列表元素对象
,url: ‘/index/creative/upload2’ //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,accept: ‘file’
,multiple: true
,number: 3
,auto: false
,bindAction: ‘#testListAction’
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var 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 值,以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render(‘progress’); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find(‘tr#upload-‘+ index)
,tds = tr.children();
tds.eq(3).html(”); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
// navArr[]上面外面定义空数组
navArr.push(res.message); //返回的文件地址 存进数组
console.log(JSON.stringify(navArr))
console.log(typeof JSON.stringify(navArr))
$(“.filess”).val(navArr.toString());
// $(“.filess”).attr(“value”,JSON.stringify(navArr));
return;
//}
this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
// console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find(‘tr#upload-‘+ index)
,tds = tr.children();
tds.eq(3).find(‘.demo-reload’).removeClass(‘layui-hide’); //显示重传
}
,progress: function(n, elem, e, index){ //注意:index 参数为 layui 2.6.6 新增
element.progress(‘progress-demo-‘+ index, n + ‘%’); //执行进度条。n 即为返回的进度百分比
}
});
php控制器:
public function upload2(){
// var_dump(phpinfo());die;
$base_path = $_SERVER[‘DOCUMENT_ROOT’].”/Uploads/company/”; // 接收文件目录
$newFileName = date(“Ymds”,time()).’_’.$_FILES[‘file’][‘name’];
$target_path = $base_path . $newFileName;
$oldFileName = $_FILES[‘file’][‘name’];
// dump($_FILES);die();
if (move_uploaded_file($_FILES[‘file’][‘tmp_name’],$target_path)) {
$array = array (
“code” => “1”,
// “message” =>$target_path,
// “oldname” => $_FILES[‘file’][‘name’]
//”message” => DS.”Uploads”.DS.”company”.DS.$newFileName.”|”.$oldFileName
“message” => $newFileName.”|”.$oldFileName
);
echo json_encode($array);
} else {
$array = array (
“code” => “0”,
“message” => “There was an error uploading the file, please try again!”.$_FILES[‘file’][‘error’]);
echo json_encode($array);
}
}
stat = false
form.on(‘submit(sub)’,function(data){
if(!stat){
stat=true;
执行语句
})
public function index() { $db = [ // 数据库类型 'type' => 'mysql', // 服务器地址 'hostname' => 'rm.mysql.rds.aliyuncs.com', //'hostname' => 'rm.mysql.rds.aliyuncs.com', // 数据库名 'database' => 'kehu', // 用户名 'username' => 'kehu', // 密码 'password' => 'SHpw', // 端口 'hostport' => '3306', // 连接dsn 'dsn' => '', // 数据库连接参数 'params' => [], // 数据库编码默认采用utf8 'charset' => 'utf8', // 数据库表前缀 'prefix' => '', // 数据库调试模式 'debug' => true, // 数据库部署方式:0 集中式(单一服务器),1 分布式(主从服务器) 'deploy' => 0, // 数据库读写是否分离 主从式有效 'rw_separate' => false, // 读写分离后 主服务器数量 'master_num' => 1, // 指定从服务器序号 'slave_no' => '', // 自动读取主库数据 'read_master' => false, // 是否严格检查字段是否存在 'fields_strict' => true, // 数据集返回类型 'resultset_type' => 'array', // 自动写入时间戳字段 'auto_timestamp' => false, // 时间字段取出后的默认时间格式 'datetime_format' => 'Y-m-d H:i:s', // 是否需要进行SQL性能分析 'sql_explain' => false, ]; $list = Db::connect($db) -> name('rockphp_live_kj') -> where('id', '>', 0) -> order('id', 'DESC') //-> page($page, 50) -> limit(12) -> select(); //dump($list);die(); //$list = json_encode($list,true); $this->assign('list',$list); return view(); }
where(’id’,’EXP’,‘IN (1,2,3,4,5)’)
查询的条件不会被当成字符串,所以后面的查询条件可以使用任何SQL支持的语法,包括使用函数和字段名称。
layui.use('jquery',function(){
$=layui.jquery;
})
var $ = layui.$;
var jQuery = layui.$;
window.jQuery = layui.$;
的形式是可以的。
判断是否是移动端 var isTouchdevice = 'ontouchstart' in document.documentElement window.innerWidth; window.innerHeight;
form改成div后,button的type=reset就失效了,
button的三个type参数submt,reset,button,如果使用type=submit,就不走layui的form.on方法,如果走form.on
<script> layui.use('form',function(){ var form = layui.form; form.on('submit(add)', function(data) { console.log(data); $.post('/index/jbgs/apply/add', data.field, function(result) { // result.code = 100if; // layer.msg("success"); // setTimeMethods(function() // { // location.reload(); // }, 500) }); // return false; }); }) </script>
//需要引用layer或者layui
//需要引用jquery
//需要引用swiper组件
<script>
//articlecontent是文章id所在DOM
$("#aritclecontent").find("img").on("click",function() {
var html = '';
html += '<div class="swiper-container" style="z-index:999999999;width:1024px;"><div class="swiper-wrapper">';
$('#aritclecontent img').each(function (index) {
html += '<div class="swiper-slide">'
html += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div><img style="width:1024px;" src="' + $(this).attr("src") + '"></div>';
})
html += '</div></div>';
layer.open({
type: 1,
// area:['900px','600px'],
title: false,
skin: 'layui-layer-rim',
closeBtn: 1,
// shade:0,
content: html
})
var mySwiper = new Swiper('.swiper-container',{
// direction: 'vertical',//竖着切换
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
})
</script>