前端代码:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ trans('admin.upload') }}</h3>
</div>
<div class="panel-body">
<form action="" method="post" class="form-horizontal excel-upload-form"
enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="inputFile" class="col-sm-3 control-label">上传文件:</label>
<div class="col-sm-7">
<input type="file" name="file" class="file" multiple data-show-upload="false">
</div>
@if($errors->any())
<div class="col-sm-9 col-sm-offset-3" style="color: red;padding-top: 10px;">
<i class="fa fa-info-circle"></i> {{ $errors->first() }}
</div>
@endif
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<div class="btn-group">
<button type="submit" class="btn btn-primary"><i class="fa fa-upload"></i> 导入数据</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$(function () {
//文件上传初始化
$('.file').fileinput({
language: 'zh',
browseLabel: '浏览',
cancelLabel: '取消',
removeLabel: '删除',
initialPreviewAsData: true,
allowedFileExtensions: ['xls', 'xlsx', 'png', 'jpg', 'gif', 'jpeg']
});
$('form').on('submit', function (e) {
e.preventDefault();
$(this).find('button[type="submit"]').prop('disabled', true).empty().html('<i class="fa fa-spinner fa-pulse"></i> 保存中...');
//获取上传文件对象
var files = $('.file')[0].files;
//给对象添加slice()方法
files = Array.prototype.slice.call(files);
//length上传文件数量 result新构建数组 limit每次取文件数量
var length = files.length,
result = [],
limit = 5;
//没有选择上传文件提示
if (length === 0) {
swal('请选择上传图片!', '', 'error');
$.pjax.reload('#pjax-container');
return false;
}
//创建FormData数据对象
var data = new FormData();
data.append('_token', $('input[name="_token"]').val());
//以limit长度分割数组
for (var i = 0; i < length; i += limit) {
result.push(files.slice(i, i + limit));
}
//以key为键 取result数组值
var key = 0,
count = result.length;
//第一次上传
ajaxFunc();
//第一次后定时上传
var id = setInterval(imgUpload, 5000);
function ajaxFunc() {
//删除FormData数据对象里值
data.delete('img[]');
//将result[key]里的每个文件写入img数组
for (var j = 0; j < result[key].length; j++) {
data.append('img[]', result[key][j]);
}
//上传文件接口
var url = '';
$.ajax({
url: url,
type: 'post',
data: data,
dataType: 'json',
cache: false,
processData: false,
contentType: false,
success: function (res) {
key++;
if (key === count) {
//取消定时器
clearInterval(id);
swal(res.msg, '', 'success');
$.pjax.reload('#pjax-container');
}
}
});
}
function imgUpload() {
if (key < count) {
ajaxFunc();
} else {
clearInterval(id);
swal('导入凭证完毕!', '', 'success');
$.pjax.reload('#pjax-container');
}
}
});
})
</script>
后端代码:
public function upload(Request $request)
{
if ($request->isMethod('post')) {
if (!$request->hasFile('img')) {
$arr = [
'success' => true,
'msg' => '选择需要导入的图片文件!'
];
admin_toastr('选择需要导入的图片文件!', 'error');
return $arr;
}
$imgDatas = $request->file('img');
$slug = 'upload/voucher/' . date('Y') . '/';
foreach ($imgDatas as $imgData) {
if (!$imgData->isValid()) continue;
$path = $slug . $imgData->getClientOriginalName();
if (file_exists(public_path($path))) {
Storage::disk('admin')->delete($path);
}
$res = Storage::disk('admin')->putFileAs($slug, $imgData, $imgData->getClientOriginalName());
}
if ($res) {
$arr = [
'success' => true,
'msg' => '导入图片成功!'
];
admin_toastr('导入图片成功!', 'success');
} else {
$arr = [
'success' => false,
'msg' => '导入图片失败!'
];
admin_toastr('导入图片失败!', 'error');
}
return $arr;
} else {
$arr = [
'success' => false,
'msg' => '请求错误!'
];
admin_toastr('请求错误!', 'error');
}
return $arr;
}