반응형
<fieldset class="c-fieldset">
<legend>이미지</legend>
<table class="c-table w100 border">
<tr>
<th width='100'>목록</th>
<td>
<div style="display:flex; justify-content: space-between; align-items: center;">
<input type="file" name="list_img" id="list_img" accept="image/*" class="preview-img" onchange="product.preview();">
<? if ($imgs['list_img']) { ?>
<img onclick="product.zoom()" src="<?= $config['imgPath'] ?>/product/<?= $data['index_no'] ?>/<?= $imgs['list_img'] ?>" style="width:100px; max-height:100px; object-fit:contain;">
<? } ?>
</div>
</td>
</tr>
<? for ($i = 1; $i <= 6; $i++) { ?>
<tr>
<th width='100'>상세<?= $i ?></th>
<td>
<input type="file" name="img<?= $i ?>" id="img<?= $i ?>" accept="image/*" class="preview-img" onchange="product.preview();">
<img onclick="product.zoom()" src="<?= $config['imgPath'] ?>/product/<?= $data['index_no'] ?>/<?= $imgs['img' . $i] ?>" style="width:100px; max-height:100px; object-fit:contain;">
</td>
</tr>
<? } ?>
</table>
<style>
#dropArea {
height: 200px;
border: 2px dashed #ccc;
text-align: center;
line-height: 200px;
}
#dropArea.on {
border-color: red;
}
</style>
<br>
<div id="dropArea">이미지 드래그 업로드</div>
<script>
// 드래그 앤 드롭 이벤트 처리
var dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', function(e) {
e.preventDefault();
dropArea.classList.add('on');
});
dropArea.addEventListener('dragleave', function(e) {
e.preventDefault();
dropArea.classList.remove('on');
});
dropArea.addEventListener('drop', function(e) {
e.preventDefault();
// 파일명 기준으로 정렬
var files = Array.from(e.dataTransfer.files).sort((a,b)=>a.name.localeCompare(b.name));
var i = 0;
for (file of files) {
var newFileList = new DataTransfer();
newFileList.items.add(file);
if (i == 0) {
var id = "list_img";
} else {
var id = "img" + i;
}
document.getElementById(id).files = newFileList.files;
i++;
}
product.preview();
});
</script>
</fieldset>
반응형
'프로그램 > HTML' 카테고리의 다른 글
| 원형 프로그래스바 만들기, 원형차트 생성 (0) | 2023.12.28 |
|---|---|
| ie 저버전에서 랜더링 적용 (0) | 2014.12.01 |
| jquery 기반 스크롤을 가장 가까운 box 위치로! (0) | 2014.12.01 |
| html 공부 네이버 헤더 만들어보기. (0) | 2014.12.01 |
| html 공부( 네이버 제목줄 만들기) (0) | 2014.12.01 |
