一个简单的ZUI多文件上传的demo和sql练习
程序员文章站
2022-04-08 17:09:53
...
最近用ZUI做一个上传文件带进度条的功能
网上看了很多 ，但是却实现不了功能 ，自己去使用了ZUI的框架
做了一个小demo
要注意不可以和bootstrap框架同时用 会引起方法变量名冲突.
然后要注意引入zui.js和zui.upload.js.和jquery.js的顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/lib/jquery/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/js/zui.min.js"></script>
<!--<script src="../../public/vendors/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>-->
<link href="./../zui/lib/uploader/zui.uploader.css" rel="stylesheet">
<script src="./../zui/lib/uploader/zui.uploader.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<!-- ZUI 标准版压缩后的 CSS 文件 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.9.1/css/zui.min.css">
<!-- ZUI Javascript 依赖 jQuery -->
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
</head>
<body>
<div id="tableUploader" class="uploader">
<div class="uploader-message text-center">
<div class="content"></div>
<button type="button" class="close">×</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">文件名</th>
<th style="width: 100px">大小</th>
<th style="width: 160px; text-align: center;">状态/操作</th>
</tr>
</thead>
<tbody class="uploader-files">
<tr class="file template">
<td style="width: 38px; padding: 3px"><div class="file-icon"></div></td>
<td style="padding: 0">
<div style="position: relative; padding: 8px;">
<strong class="file-name"></strong>
<div class="file-progress-bar"></div>
</div>
</td>
<td><span class="file-size text-muted"></span></td>
<td class="actions text-right" style="padding: 0 4px;">
<div class="file-status" data-toggle="tooltip" style="margin: 8px;"><i class="icon"></i> <span class="text"></span></div>
<a data-toggle="tooltip" class="btn btn-link btn-download-file" target="_blank"><i class="icon icon-download-alt"></i></a>
<button type="button" data-toggle="tooltip" class="btn btn-link btn-reset-file" title="Repeat"><i class="icon icon-repeat"></i></button>
<button type="button" data-toggle="tooltip" class="btn btn-link btn-rename-file" title="Rename"><i class="icon icon-pencil"></i></button>
<button type="button" data-toggle="tooltip" title="Remove" class="btn btn-link btn-delete-file"><i class="icon icon-trash text-danger"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="padding: 4px 0">
<div style="position: relative;">
<div class ="uploader-status pull-right text-muted" style="margin-top: 5px;"></div>
<button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
<button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
<script>
$('#tableUploader').uploader({
url: '../admin/video/uploadvideo',//上传地址
lang: 'zh_cn',
file_data_name: 'file',//文件类型
// fileList:'grid',
// staticFiles在此选项中设定文件上传控件初始化显示在文件列表中的静态文件条目。对象数组的对象格式如下：
chunk_size:'0',//启用分片上传 0为不启用
multipart_params: {
foo: 'foo',
bar: ['bar1', 'bar2'],
test: {
attr1: 'attr1 value'
}
},//携带参数
responseHandler: function(responseObject, file) {
// 当服务器返回的文本内容包含 `'error'` 文本时视为上传失败
if(responseObject.response.indexOf('error')) {
return '上传失败。服务器返回了一个错误：' + responseObject.response;
}
}
});
</script>
php端用$_FILES[‘file’]接收即可
$sql ='SELECT ao.id as o_id,ya.id,ya.areaname FROM y_advertising_order ao
LEFT JOIN y_area ya on find_in_set(ya.id,ao.area)
where ao.id= :oid ';
$list =Db::query($sql,['oid'=>$data]);
```
加一个联表查询使用find_in_set()的sql ,find_in_set配合join真的很好用
上一篇： java多线程简单的小例子
下一篇： BAT读取文件