Drag＆DropによるHTMLへのファイル入力

Posted at 2024-11-02

sample.html

<!DOCTYPE html>
<html>
<head>
    <style>
        #drop_zone {
            background-color:peachpuff;
            border-style: dashed;
            border-width: 1px;
            line-height: 50px;
            height: 100px;
            }
    </style>
</head>
<body>
    <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
        <p>１つ以上のバイナリファイルをこの領域にドロップしてください</p>
    </div>
</body>
</html>

sample.js

function dropHandler(ev) {
    ev.preventDefault();
    if (ev.dataTransfer.items) {
        [...ev.dataTransfer.items].forEach((item, i) => {
            if (item.kind === "file") {
                const file = item.getAsFile();
            }
        });
    }
}

function dragOverHandler(ev) {
    ev.preventDefault();
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up