Javascriptで画像ファイルをドラッグアンドドロップでプレビュー表示

実際にJavaScriptで動くページになっています。

画像ファイルをドロップしてください

説明
ソースコード

説明

以前にWebページでファイルをアップロードするフォームの作り方を調べたことがあり、その際ファイルをドラックアンドドロップ出来ることを知りました。そのローカルファイルをJavaScriptで読み込むことが出来て、HTMLにimgエレメントを追加出来れば画像オブジェクトを動的に表示できるのではないかと思い試してみました。

このようなページを作る場合一度サーバーに画像をアップロードし、サーバーサイドでHTMLをレンダリングしてWebブラウザに表示する方法しか無いと思っていたので、動いた時には結構驚きました。

今回はimgエレメントで画像を表示していますが、canvasで画像を読み込むことが出来ればJavaScriptを使い画像加工アプリケーションが作れる可能性があります。個人的にC#(WinForms)とOpenCVSharpでデスクトップアプリケーションとして作成していますが、これをHTMLとJavascriptでWebアプリケーションとして作成することが出来るということになり夢が広がります。パフォーマンス的には問題がありそうですが、お手軽に実行環境が構築できる点は魅力的です。

さらに調べてみたら、OpenCV.jsというJavascript用のOpenCVライブラリがあるようで、ますます興味がひかれます。

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScriptで画像をドラックアンドドロップするサンプル</title>
        <style type="text/css">

.upload_area_style {
    cursor: pointer;
    text-align:center;
    padding: 10px;
    border-radius:4px;
    font-size:large;
    border:solid 1px #eee;
}
        </style>
    </head>
    <body>
        <div id="upload_area" class="upload_area_style" >
            画像ファイルをドロップしてください
        </div>
        <input type="file" id="upload_form_fileselect" name="upfile" multiple="multiple" style="display:none;">
            
        <div id="preview_area"></div>
        <script>

let upload_area = document.getElementById('upload_area');
let preview_area = document.getElementById('preview_area');
let upload_form_fileselect = document.getElementById('upload_form_fileselect');

upload_area.addEventListener('dragenter', function(e){
    upload_area.style.background = '#EEE';
});

upload_area.addEventListener('dragleave', function(e){
    upload_area.style.background = '#DDD';
});

upload_area.addEventListener('drop', function(e){
    upload_form_fileselect.files =  e.dataTransfer.files;
    upload_area.style.background = '#FFF';

    let file = upload_form_fileselect.files[0];
    while(preview_area.firstChild){
        preview_area.removeChild(preview_area.firstChild);
    }

    let reader = new FileReader();
    reader.addEventListener('load', function(e) {
        let img = document.createElement("img");
        img.setAttribute("src", reader.result);
        img.setAttribute("id", 'preview-image');
        preview_area.appendChild(img);
    });
    reader.readAsDataURL(file);
});

document.addEventListener('dragover',function(e){
    e.preventDefault();
});
document.addEventListener('drop',function(e){
    e.preventDefault();
});


        </script>
    </body>
</html>

説明

ソースコード

コメント