html 이미지 드래그로 파일에 업로드 하기

        <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>