- 背景
前段时间因为业务需求，涉及到了多种文件的上传操作；
其中，包含 图片、Excel文件、视频文件
比如：我需要进行
excel表格文件的上传，然后读取其中的数据写入数据库 那么，至少要限制一下上传文件的类型 在此，进行整理一番，欢迎指摘 … - 环境
- 前端框架：Layui 2.5.4
- 使用框架：ThinkPHP 5.1.2
- 文件类型：image、excel、video- 前端配置
代码语言：javascript复制前提自然是先要对
layui前端框架的正确引用，个人使用的版本是：2.5.4
<link href="__LAYUI__/css/layui.css" rel="stylesheet">
<!--采用模块化方式-->
<script type="text/javascript" src="__LAYUI__/layui.js"></script>
<!-- jQuery (necessary JavaScript plugins) -->
<script type='text/javascript' src="__LAYUI__/jquery-3.2.1.min.js"></script>☛. 图片文件的上传操作
- 首先，是
html页面的标签布局设计
<div class="layui-upload layui-input-inline">
<button type="button" name="img_upload" class="layui-btn btn_upload_img">
<i class="layui-icon"></i>上传图片
</button>
<img class="layui-upload-img img-upload-preview-medium img-upload-view"
src="">
<input type="hidden" name="cover_url" class="menu-icon" value="">
</div>- 其次是对应的
js代码的设计
layui.use(['layer','upload'], function () {
var upload = layui.upload;
//指定允许上传的文件类型
upload.render({
elem: '.btn_upload_img'
, type: 'images'
, exts: 'jpg|png|gif|jpeg' //设置一些后缀，用于演示前端验证和后端的验证
, url: '/api/upload/img_file' //TODO 此为服务端上传接口
, data: {'_token': tag_token}
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('.img-upload-view').attr('src', result); //图片链接（base64）
});
}
, done: function (res) {
layer.msg(res.message);
//如果上传成功
if (res.status == 1) {
$('.menu-icon').val(res.data.url);
}
}
, error: function () {
//演示失败状态，并实现重传
return layer.msg('上传失败,请重新上传');
}
});
});- 服务端对应的上传接口代码参考如下：
/**
* 单一图片的上传操作
* @param Request $request
*/
public function img_file(Request $request)
{
$status = 0;
$data = [];
if ($request->Method()== 'POST') {
$file = $request->file('file');
// 移动到框架应用根目录/upload/ 目录下
$info = $file->move('upload');
if ($info){
//把反斜杠()替换成斜杠(/) 因为在windows下上传路是反斜杠径
$getSaveName = str_replace("\", "/", $info->getSaveName());
$fileUrl = '/upload/' . $getSaveName;
$data['url'] = $fileUrl;
$message = '上传成功';
}else{
$message = "上传失败 ".$file->getError();
}
} else {
$message = "参数错误";
}
return showMsg($status, $message,$data);
}- 参考截图：
☛. Excel文件的上传操作
- 首先，便是页面标签的布局
<button type="button"
class="layui-btn" id="uploadExcel">
<i class="layui-icon"></i>上传物流订单
</button>- 然后，需要对
js的代码进行配置
layui.use(['layer','upload'], function () {
var upload = layui.upload;
//指定允许上传的文件类型
upload.render({
elem: '#uploadExcel'
,url: '/api/upload/file_excel' //此处为所上传的请求路径
,accept: 'file' //普通文件
,exts: 'xls|excel|xlsx' //只允许上传压缩文件
,done: function(res){
console.log(res)
layer.msg(res.message);
}
});
});- 接下来，便是对所获取的
excel文件的解析处理，以我的ThinkPHP5.1.2处理代码为例
/**
* 进行excel文件的上传读取操作
* @param Request $request
*/
public function file_excel(Request $request){
$status = 0;
if ($request->Method() == 'POST') {
$file = $request->file('file');
// 移动到框架应用根目录/upload/ 目录下
$info = $file->move('upload');
if ($info) {
//把反斜杠()替换成斜杠(/) 因为在windows下上传路是反斜杠径
$getSaveName = str_replace("\", "/", $info->getSaveName());
$fileUrl = './upload/' . $getSaveName;
//TODO 此时进行数据的解析，个人业务逻辑，此处应该修改为你自己的逻辑
$orderModel = new XorderGoods();
$status = 1;
$message = $orderModel->ajaxDealExcelOrder($fileUrl);
} else {
$message = "上传失败 " . $file->getError();
}
} else {
$message = "参数错误";
}
return showMsg($status, $message);
}- 后续的数据处理，请参考：【
ThinkPHP5.1 excel表的导入导出操作 (PHPExcel)】
☛. 视频文件的上传操作
为了应对大文件的上传，补充设计了，进度条展示效果
- 首先，是
html页面的标签布局设计,参考如下：
<div class="layui-form-item">
<label class="layui-form-label">视频：</label>
<div class="layui-upload layui-input-block">
<button type="button" name="video_upload" class="layui-btn btn_upload_video">
<i class="layui-icon"></i>上传视频
</button>
<br><br>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="progressBar">
<div id="progressBar" pb_loading_tag="1" class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<br>
<video class="video-upload-view" src="" controls="controls" style="display: none"></video>
<input type="hidden" name="save_url" class="save_url" value="">
</div>
</div>- 然后是对应的
js代码编写
layui.use(['layer','upload','element'], function () {
var upload = layui.upload;
var element = layui.element;
var loading_count = 0;
upload.render({
elem: '.btn_upload_video'
,exts: 'mp4|flv' //设置一些后缀，用于演示前端验证和后端的验证
,url: '/api/upload/video_file' //改成您自己的上传接口
,accept: 'video' //视频
, before: function (obj) {
loading_count = 0;
$("#progressBar").attr('pb_loading_tag',1);
element.progress('progressBar', '0%');
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('.video-upload-view').attr('src', result); //图片链接（base64）
$('.video-upload-view').show();
});
},
progress: function() {
//模拟loading
var timer = setInterval(function(){
var loading = $("#progressBar").attr('pb_loading_tag');
if(loading == 1){
loading_count = loading_count Math.random()*10|1;
if(loading_count>98){
loading_count = 98;
}
}else {
loading_count = 100;
clearInterval(timer);
}
//这里是虚拟的哦，其实就是为了能提示一下没上传完就可以了，哈哈...
element.progress('progressBar', loading_count '%');
}, 300 Math.random()*1000);
}
,done: function(res){
//如果上传成功
if (res.status == 1) {
$('.save_url').val(res.data.url);
$("#progressBar").attr('pb_loading_tag',0);
}
layer.msg(res.message);
}
});
});- 服务端的接口，可完全借用前面提到的 图片上传代码
如果文件比较大，需要更改一下
php.ini 和 nginx.conf配置文件的一些东西（可百度哦） 有能力的，可以搜索数据片上传的方法，提高上传效率！ - 实现效果截图：
【提示】
这里的进度条上传是虚拟的哦，其实就是为了能提示一下没上传完就可以了，哈哈…
附录：
- 1 .
showMsg公共方法
/**
* 公用的方法 返回json数据，进行信息的提示
* @param $status 状态
* @param string $message 提示信息
* @param array $data 返回数据
*/
function showMsg($status,$message = '',$data = array()){
$result = array(
'status' => $status,
'message' =>$message,
'data' =>$data
);
exit(json_encode($result));
}- 2 . 如果操作，上传的文件会默认保存到了
/public/upload目录下 一般而言，后期会考虑将各种文件统一使用 FTP 上传到资源服务器； 届时可以对鄙人所提供的上传接口进行优化升级即可 …
