需要用到layui插件,在需要的页面顶部引入
在页面用
<div class="layui-input-block">
<button type="button" class="layui-btn" id="fileUpload"><i class="layui-icon">i>上传文件button>
div>
这里用layui的方式去请求后台方法
<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', //处理上传文件接口
accept: 'file',
auto: false,
acceptMime: '*.*',//允许上传的文件类型
choose: function (obj) {
element.progress('uploadProgress', '0%');//进度条清0
$('.mask').show();//遮罩层
$('.loading').show();//显示进度条
var data = this.data;
var files = obj.pushFile();//选择的文件推入obj
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 {
//状态为1的时候上传
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>
通过后台方法去接收到数据拼接起来文件
public function upload()
{
$status = 1;
//上传文件要保存的路径
$fname = sprintf(public_path() . '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;
$res1 = fen($fname);
}
//返回上传状态
$res = ['status' => $status, 'downUrl' =>isset($res1)?$res1:''];
return json($res);
}
0条评论