song , artist 調整檔案傳檔功能

20250509
This commit is contained in:
allen.yan 2025-05-09 15:25:26 +08:00
parent c5c7dc0c14
commit 580f3c7f9b
2 changed files with 46 additions and 24 deletions

View File

@ -47,18 +47,29 @@
{{-- 檔案上傳 --}}
<input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-4 w-full" />
<p class="text-xs text-gray-500 mb-2">
系統限制:最大上傳 {{ $maxUploadSize }}
</p>
<!-- 上傳中提示 -->
<div wire:loading wire:target="file" class="text-sm text-blue-500">
檔案上傳中,請稍候...
</div>
<!-- 上傳完成提示 -->
<div wire:loading.remove wire:target="file" class="text-sm text-green-600">
<x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
<div x-data="{
fileName: '',
updateFileInfo(event) {
const file = event.target.files[0];
if (file) this.fileName = file.name+ '('+(file.size / 1024 / 1024).toFixed(2) + ' MB'+')';
}
}"
>
<div x-show="$wire.file === null" >
<input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-2 w-full" @change="updateFileInfo" />
<p class="text-xs text-gray-500 mb-2" >
系統限制:最大上傳 {{ $maxUploadSize }}
</p>
</div>
<!-- 檔案資訊顯示 -->
<div wire:loading.remove wire:target="file" class="text-sm text-green-600 flex items-center space-x-1" x-show="$wire.file != null">
<x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
<strong x-text="fileName"></strong>
</div>
<!-- 上傳中提示 -->
<div wire:loading wire:target="file" class="text-sm text-blue-500">
檔案上傳中,請稍候...
</div>
</div>

View File

@ -143,18 +143,29 @@
</p>
</div>
{{-- 檔案上傳 --}}
<input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-4 w-full" />
<p class="text-xs text-gray-500 mb-2">
系統限制:最大上傳 {{ $maxUploadSize }}
</p>
<!-- 上傳中提示 -->
<div wire:loading wire:target="file" class="text-sm text-blue-500">
檔案上傳中,請稍候...
</div>
<!-- 上傳完成提示 -->
<div wire:loading.remove wire:target="file" class="text-sm text-green-600">
<x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
<div x-data="{
fileName: '',
updateFileInfo(event) {
const file = event.target.files[0];
if (file) this.fileName = file.name+ '('+(file.size / 1024 / 1024).toFixed(2) + ' MB'+')';
}
}"
>
<div x-show="$wire.file === null" >
<input type="file" wire:model="file" accept=".csv, .xls, .xlsx" class="mb-2 w-full" @change="updateFileInfo" />
<p class="text-xs text-gray-500 mb-2" >
系統限制:最大上傳 {{ $maxUploadSize }}
</p>
</div>
<!-- 檔案資訊顯示 -->
<div wire:loading.remove wire:target="file" class="text-sm text-green-600 flex items-center space-x-1" x-show="$wire.file != null">
<x-wireui:icon name="check-circle" class="w-5 h-5 text-green-500" />
<strong x-text="fileName"></strong>
</div>
<!-- 上傳中提示 -->
<div wire:loading wire:target="file" class="text-sm text-blue-500">
檔案上傳中,請稍候...
</div>
</div>
<x-slot name="footer">
<div class="flex justify-between w-full">