前端代碼:
<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;
}