php | laravel 이미지업로드 컴포넌트
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 07.18 12:51
- 조회
- 2,712
- 댓글
- 0
본문
app/View/Component/Uploadfile.php
[code]
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Uploadfile extends Component
{
public $field = '';
public $id = '';
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($field, $id)
{
$this->field = $field;
$this->id = $id;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.uploadfile');
}
}
[/code]
/resources/views/components/uploadfile.blade.php
[code]
<label x-data="uploadImageData('{{ $field }}', '{{ $id }}')"
class='flex flex-col border-4 border-dashed w-full h-32 hover:bg-gray-100 hover:border-purple-300 group box-content'
style="width: 400px; height: 300px;">
<div x-show="previewUrl === ''" class='flex flex-col items-center justify-center h-full'>
<div class="flex flex-col justify-center items-center">
<svg class="w-10 h-10 text-purple-400 group-hover:text-purple-600" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
</path>
</svg>
<p class='lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider'>
Select a photo
</p>
</div>
</div>
<div x-show="previewUrl !== ''" class="h-full">
<img :src="previewUrl" style="width: 400px; height: 300px;" />
</div>
<input type='file' name="{{ $field }}" id="{{ $id }}" class="hidden" @change="updatePreview()" />
</label>
@once
@push('botStack')
<script type="text/javascript">
function uploadImageData(field, id) {
return {
field: field,
id: id,
previewUrl: "",
updatePreview() {
var photo = document.getElementById(id).files[0];
if (!photo.type.match('image.gif|image.png|image.jpeg|image.jpg')) {
$.alert('이미지 파일만 업로드 가능합니다')
return
}
var reader = new FileReader();
reader.onload = e => {
this.previewUrl = e.target.result;
};
reader.readAsDataURL(photo);
},
clearPreview() {
document.getElementById(id).value = null;
this.previewUrl = "";
}
};
}
</script>
@endpush
@endonce
[/code]
사용방법
[code]
...
<x-uploadfile field="upfile" id="upfile_1"></x-uploadfile>
...
[/code]
결과
댓글 0개
등록된 댓글이 없습니다.