ドラッグ・ドロップでファイル処理する（jQuery）

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/10/26 00:29

ただいまコメントを受けつけておりません。

ドラッグ・ドロップでファイル処理する（jQuery）

dragover とかないとちゃんと動かないのは注意な。

// encoding.js を読み込んでいる前提
// リポジトリ：https://github.com/polygonplanet/encoding.js
    const body = $('body');
    body.on('dragleave', (e) => {
        body.css('background-color', '');
        e.preventDefault();
    });
    body.on('dragover', (e) => {
        body.css('background-color', 'lightyellow');
        e.preventDefault();
    });

    body.on('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        fileReader.onload = (e) => {
            const codes = new Uint8Array(fileReader.result);
            const rawString = Encoding.convert(codes, {
                to: 'unicode',
                from: Encoding.detect(codes),
                type: 'string'
            });
            console.log(rawString);
        };
    	fileReader.readAsArrayBuffer(e.originalEvent.dataTransfer.files[0]);
        body.css('background-color', '');
    });