ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现

背景
前段时间因为业务需求，涉及到了多种文件的上传操作；
其中，包含 图片、Excel文件、视频文件
比如：我需要进行 excel 表格文件的上传，然后读取其中的数据写入数据库
那么，至少要限制一下上传文件的类型
在此，进行整理一番，欢迎指摘 …
环境

- 前端框架：Layui 2.5.4
- 使用框架：ThinkPHP 5.1.2
- 文件类型：image、excel、video

前端配置

前提自然是先要对 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) {//预读本地文件示例，不支持ie8obj.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%');//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('.video-upload-view').attr('src', result); //图片链接（base64）$('.video-upload-view').show();});},progress: function() {//模拟loadingvar 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 上传到资源服务器；
届时可以对鄙人所提供的上传接口进行优化升级即可 …

ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现相关推荐

使用jQuery OCUpload实现excel文件一键上传功能
使用jQuery OCUpload实现excel文件一键上传功能 js代码 //为导入按钮,添加一键上传效果 $("#button-import").upload({action: ...
大文件分片上传前端框架_无插件实现大文件分片上传，断点续传
文件上传.gif 1. 简介: 本篇文章基于实际项目的开发,将介绍项目中关于大文件分片上传.文件验证.断点续传.手动重试上传等需求的使用场景及实现: 2. 项目需求在一个音视频的添加中,既要有音视频 ...
java 写tb级文件_三管齐下！TB 级文件的上传性能瞬间被优化 100 倍！
作者 | 中华石杉责编 | 伍杏玲本文经授权转载石杉的架构笔记(ID:shishan100) 这篇文章我们来看看,世界上最优秀的分布式文件系统HDFS,是如何对超大文件的上传做性能优化的? 首先, ...
三管齐下！TB 级文件的上传性能瞬间被优化 100 倍！
作者 | 中华石杉责编 | 伍杏玲本文经授权转载石杉的架构笔记(ID:shishan100) 这篇文章我们来看看,世界上最优秀的分布式文件系统HDFS,是如何对超大文件的上传做性能优化的? 首先, ...
ASP.NET MVC实现Excel文件的上传下载
在应用系统开发当中,文件的上传和下载是非常普遍的需求.在基于.NET的C/S架构的项目开发当中,有多种方案可以实现文件的上传和下载(httpwebrequest.webclient等),而且多采用异步 ...
Excel文件的上传下载解析详解
Excel有两个版本Excel2003和Excel2007,"2003的后缀.xls","2007的后缀名.xlsx" 由于两者实现机制不同,当实现文件上传时两 ...
生成Excel文件并上传到阿里云OSS
代码 @Resourceprivate ExcelUtils excelUtils;@Async("doSomethingExecutor")Future doCreateStoc ...
php 读取 excel 文件并上传数据库
1.首先接收前端发来的excel //接收前台文件public function addExcel(){//接收前台文件$ex = $_FILES['file'];//重设置文件名$filename ...
HuTool工具包实现Excel文件的上传、下载以及修改文件名称
加载依赖文件 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</ar ...

ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现

☛. 图片文件的上传操作

☛. Excel文件的上传操作

☛. 视频文件的上传操作

附录：

ThinkPHP5框架：Layui 下 image、video、excel 文件的上传实现相关推荐

最新文章

热门文章