对于很大的文件比如几百M的音频视频 软件上传，如果直接上传 服务器，经常处理不了。
可以利用layui，在客户端先把大文件切割成小文件 一个一个上传，然后服务器端，再组合成一个大文件。
服务器端讲小文件组合成大文件代码 。文件名 upload.html
<?php //处理分片上传文件 $status=1; //上传文件要保存的路径 $fname = sprintf('/tmp/%s.%s',$_POST['fileName'],$_POST['fileExt']); $data = file_get_contents($_FILES['file']['tmp_name']); if($_POST['page']==1){ file_put_contents($fname,$data); } else { //其余文件追加到文件末尾 file_put_contents($fname,$data,FILE_APPEND); } //最后一片文件 if($_POST['totalPage']==$_POST['page']){ $status=2; } //返回上传状态 $res=['status'=>$status,'downUrl'=>"http://localhost/data.dat"]; echo json_encode($res);前端切分文件，并上传代码 file.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</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, maximum-scale=1"> <link rel="stylesheet" href="./layui/css/layui.css" media="all"> <script src="./layui/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> <style type="text/css"> .mask{position:fixed;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.8;filter:alpha(Opacity=80);-moz-opacity:0.8;z-index:999;display:none;} .loading{position:fixed;width:300px;left:50%;margin-left:-150px;top:200px;height:18px;border-radius:10px;background:#fff;z-index:9999;overflow:hidden;display:none;} </style> </head> <body> <div class="layui-main"> <form class="layui-form" method="post" action=""> <input type="hidden" name="form_submit" value="ok" /> <div class="layui-form-item"> <label class="layui-form-label">安装包：</label> <input type="hidden" id="totalPage" value="0"/> <input type="hidden" id="page" value="1"/> <input type="hidden" id="status" value="0"/> <div class="layui-input-block"> <button type="button" class="layui-btn" id="fileUpload"><i class="layui-icon"></i>上传文件</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">安装包名：</label> <div class="layui-input-block"> <input type="text" name="name" id="name" value="" lay-verify="title" autocomplete="off" readonly="true" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">下载地址</label> <div class="layui-input-block"> <input type="text" name="downUrl" id="downUrl" value="" lay-verify="downUrl" autocomplete="off" readonly="true" placeholder="" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <div class="mask"></div> <div class="loading"> <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress"> <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div> </div> </div> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use(['form', 'upload', 'element'], function () { var form = layui.form; var upload = layui.upload; var element = layui.element; var $ = layui.$; upload.render({ elem: '#fileUpload', url: 'upload.php', //处理上传文件接口 accept: 'file', auto: false, acceptMime: '.exe,.zip,.rar,.gz',//允许上传的文件类型 choose: function (obj) { element.progress('uploadProgress', '0%'); $('.mask').show(); $('.loading').show(); var data = this.data; var files = obj.pushFile(); var LENGTH = 500 * 1024; //每片文件大小 obj.preview(function (index, file, result) { var totalSize = file.size; var totalPage = Math.ceil(totalSize / LENGTH); $('#totalPage').val(totalPage); $('#page').val('1'); $('#status').val('1'); var fileName = file.name; $('#name').val(fileName); var fileExt = fileName.substr(fileName.lastIndexOf('.') + 1); fileName = fileName.substr(0, fileName.lastIndexOf('.')); var progressTimer = setInterval(function () { var totalPage = parseInt($('#totalPage').val()); var page = parseInt($('#page').val()); var status = $('#status').val(); if (parseInt(totalPage) == parseInt(page) && (parseInt(status) == 2 || parseInt(status) == -1)) { clearInterval(progressTimer); } else { if (status == 1) { $('#status').val('0'); data.fileName = fileName; data.page = page; data.totalPage = totalPage; data.fileExt = fileExt; obj.upload(index, file.slice((page - 1) * LENGTH, page * LENGTH)); } } }, 100); }); }, done: function (res) { if (res.status == 1) { //分片上传 var page = parseInt($('#page').val()); var totalPage = parseInt($('#totalPage').val()); element.progress('uploadProgress', Math.ceil(page * 100 / totalPage) + '%'); page = page + 1; console.log(page); $('#page').val(page); $('#status').val('1'); } else if (res.status == 2) { //上传完成 element.progress('uploadProgress', '100%'); $('#status').val('2'); $('#downUrl').val(res.downUrl); layer.msg('上传成功', {time: 1000, anim: 0}, function () { $('.mask').hide(); $('.loading').hide(); }); } else { //上传错误 $('#status').val('-1'); element.progress('uploadProgress', '0%'); console.log(!typeof (res.downUrl) == "undefined"); if (typeof (res.downUrl) == "undefined") { } else { $('#downUrl').val(res.downUrl); } layer.msg("上传失败，请重试", {time: 3000, anim: 0}, function () { $('.mask').hide(); $('.loading').hide(); }); } }, error: function(){ $('.mask').hide(); $('.loading').hide(); } }); }); </script> </body> </html>
