Layui多文件上传案例

最新推荐文章于 2024-07-27 22:51:17 发布

河南虎爷

最新推荐文章于 2024-07-27 22:51:17 发布

阅读量2.1k

点赞数

分类专栏： PHP 文章标签： php

本文链接：https://blog.csdn.net/qq_45450789/article/details/124328771

版权

PHP 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

前端：


{block name="head"}
<title>后台系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="__layuiadmin__/layui/css/layui.css" media="all">
{/block}

<!-- <body> 44554-->
{block name="body1"}
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">上传资料</label>


<div class="layui-upload">
<input class="layui-input" style="width: 560px;margin-left: 110px;" disabled="" value="注意：同时最多选择三个文件，同时最多上传三个文件，上传完三个即可再选再上传">

<button style="margin-left: 110px;" type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>

<div style="margin-left: 110px;" class="layui-upload-list" style="max-width: 1000px;">
<table class="layui-table">
<colgroup>
<col>
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>

<button style="margin-left: 110px;" type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>

<input name="filess" class="filess layui-input" value="" type="hidden">

</div>

{/block}


{block name="body2"}
<!-- <div class="layui-form-item">
<label class="layui-form-label">内容</label> -->

<div class="container ">
<!-- //此div重写父模板 -->
<div id="wrap" class="nav" value="">
</div>
=
</div>


<!-- </div> -->
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
</div>

{/block}

</div>

{block name="js"}

<script type="text/plain" style="display: none" id="md_source"></script>
{/block}

{block name="jss"}
<script src="__layuiadmin__/layui/layui.js"></script>

<script>

layui.config({
base: '__layuiadmin__/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload','laydate' ,'element', 'layer'], function(){
var $ = layui.$
,form = layui.form
,upload = layui.upload
,element = layui.element
,layer = layui.layer
,laydate = layui.laydate;


var navArr = []; //定义一个数组 用于存储 传过来的 上传文件的路径


//演示多文件列表
var uploadListIns = upload.render({
elem: '#testList'
,elemList: $('#demoList') //列表元素对象
,url: '{:url("upload2")}' //接口地址
,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 = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></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 值，以免删除后出现同名文件不可选
});

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); //返回的文件地址 存进数组

$(".filess").val(JSON.stringify(navArr)); //写入form表单的inpu中，一起传过去

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 即为返回的进度百分比
}
});

})
</script>
{/block}
<!-- </body> -->
<!-- </html> -->

后台接口：

public function upload2(){

$base_path = $_SERVER['DOCUMENT_ROOT']."/upload/company/upload2/"; // 接收文件目录
$target_path = $base_path .date("Ymds",time()).$_FILES['file']['name'];

if (move_uploaded_file($_FILES['file']['tmp_name'],$target_path)) {
$array = array (
"code" => "1",
"message" =>$target_path
);
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);
}

}

河南虎爷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Layui多文件上传案例

前端：{block name="head"}<title>后台系统</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum
复制链接

扫一扫

专栏目录