layui代码：
<div class="layui-input-inline w300">
<input type="text" class="layui-input field-source" name="source" lay-verify="required" autocomplete="off" placeholder="" readonly >
</div>
<button type="button" class="layui-btn" id="fileUpload">上传</button>
<div>
<input type="hidden" id="totalPage" value="0"/>
<input type="hidden" id="page" value="1"/>
<input type="hidden" id="status" value="0"/>
<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>
<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>
</div>
<script>
var formData = {:json_encode($data_info)};
layui.use([ 'upload', 'element'], function () {
var $ = layui.jquery
, upload = layui.upload;
var element = layui.element;
upload.render({
elem: '#fileUpload',
url: 'upload.php', //处理上传文件接口
accept: 'file',
auto: false,
acceptMime: '.mp4',//允许上传的文件类型
choose: function (obj) {
element.progress('uploadProgress', '0%');
$('.mask').show();
$('.loading').show();
var data = this.data;
var files = obj.pushFile();
var LENGTH = 1024 * 1024; //每片文件大小
for (var key in files) {
var file = files[key];
var totalSize = file.size;
var totalPage = Math.ceil(totalSize / LENGTH);
$('#totalPage').val(totalPage);
$('#page').val('1');
$('#status').val('1');
var fileName = file.name;
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(key, 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');
$('.field-source').val(res.url);
layer.msg('上传成功', {time: 1000, anim: 0}, function () {
$('.mask').hide();
$('.loading').hide();
});
} else { //上传错误
$('#status').val('-1');
element.progress('uploadProgress', '0%');
console.log(!typeof (res.url) == "undefined");
layer.msg("上传失败，请重试", {time: 3000, anim: 0}, function () {
$('.mask').hide();
$('.loading').hide();
});
}
},
error: function(){
$('.mask').hide();
$('.loading').hide();
}
});
});
</script>
单纯tp5.1上传到服务器代码:
<div class="layui-input-inline w300">
<input type="text" class="layui-input field-source" name="source" lay-verify="required" autocomplete="off" placeholder="" readonly >
</div>
<button type="button" class="layui-btn" id="fileUpload">上传</button>
<div>
<input type="hidden" id="totalPage" value="0"/>
<input type="hidden" id="page" value="1"/>
<input type="hidden" id="status" value="0"/>
<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>
<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>
</div>
<script>
var formData = {:json_encode($data_info)};
layui.use([ 'upload', 'element'], function () {
var $ = layui.jquery
, upload = layui.upload;
var element = layui.element;
upload.render({
elem: '#fileUpload',
url: 'upload.php', //处理上传文件接口
accept: 'file',
auto: false,
acceptMime: '.mp4',//允许上传的文件类型
choose: function (obj) {
element.progress('uploadProgress', '0%');
$('.mask').show();
$('.loading').show();
var data = this.data;
var files = obj.pushFile();
var LENGTH = 1024 * 1024; //每片文件大小
for (var key in files) {
var file = files[key];
var totalSize = file.size;
var totalPage = Math.ceil(totalSize / LENGTH);
$('#totalPage').val(totalPage);
$('#page').val('1');
$('#status').val('1');
var fileName = file.name;
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(key, 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');
$('.field-source').val(res.url);
layer.msg('上传成功', {time: 1000, anim: 0}, function () {
$('.mask').hide();
$('.loading').hide();
});
} else { //上传错误
$('#status').val('-1');
element.progress('uploadProgress', '0%');
console.log(!typeof (res.url) == "undefined");
layer.msg("上传失败，请重试", {time: 3000, anim: 0}, function () {
$('.mask').hide();
$('.loading').hide();
});
}
},
error: function(){
$('.mask').hide();
$('.loading').hide();
}
});
});
</script>
tp5.1+阿里云oss追加上传
public function osszhuijia(){
//默认普通上传文件
$file = $this->request->file('file');
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
$accessKeyId = Env::get('aliyun_oss.KeyId');
$accessKeySecret = Env::get('aliyun_oss.KeySecret');
// Endpoint以杭州为例，其它Region请按实际情况填写。
$endpoint = Env::get('aliyun_oss.Endpoint');
$bucket= Env::get('aliyun_oss.Bucket');
// 设置Object完整路径。Object完整路径中不能包含Bucket名称。
$object = "test5.mp4";
$uploadFile = $file->getPathName();
Log::debug($uploadFile);
try{
$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
// 第一次追加上传。第一次追加的位置是0，返回值为下一次追加的位置。后续追加的位置是追加前文件的长度。
if ($_POST['page'] == 1) {
$position = $ossClient->appendFile($bucket, $object, $uploadFile, 0);
file_put_contents('zuijiaupload.txt',$position);
Log::debug($position);
$res = ['status' => 1];
} else {
$nowposition=file_get_contents('zuijiaupload.txt');
//其余文件追加到文件末尾
$position = $ossClient->appendFile($bucket, $object, $uploadFile, $nowposition);
file_put_contents('zuijiaupload.txt',$position);
Log::debug($position);
$res = ['status' => 1];
//最后一片文件
if ($_POST['totalPage'] == $_POST['page']) {
$status = 2;
$res = ['status' => $status, 'url' => '完毕'];
}
}
//返回上传状态
echo json_encode($res);
} catch(OssException $e) {
printf(__FUNCTION__ . ": FAILED\n");
printf($e->getMessage() . "\n");
return;
}
// print(__FUNCTION__ . ": OK" . "\n");
}
