はじめに

HTMLとJavaScriptを用いて複数画像のアップロードとプレビューを行うWebサイトを作成するにあたって，Web検索したところあまり記事がヒットしなかったため自作したプログラムを公開しようと考えました．JQueryなどは使わず，素のJavaScriptで作成しました．
JavaScriptについての知識が浅いため，スマートでない部分もあるかと思います．

仕様

HTMLとJavaScriptのみで実装する．
画像を複数枚同時に投稿できる．
投稿した画像は横並びにプレビュー表示される
削除ボタンを押すとプレビューから削除される

フォルダ構成

．
├─index.html
├─js/
　　└─main.js
├─css/
　　└─style.css

HTMLで雛形を作る

まずは，HTMLで雛形を作っていきます．
ファイルアップロードのためのフォームと，空のdivタグを置いておきます．

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>画像アップロード</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <h1>画像アップロード</h1>
    <form>
        <input type="file" accept="image/*" multiple=" multiple" onchange="loadImage(this);">
    </form>
    <div id="imgPreviewField">
    </div>
    <br>
    <script type="text/javascript" src="./js/main.js">
    </script>
</body>

</html>

JavaScriptを書いていく

JavaScriptで動きの部分を書いていきます．
keyは，アップロードされた画像に付与する一意のIDを管理します．
画像をアップロードする際は，<figure></figure>で画像本体と削除ボタンを囲んだものを<div></div>内に追記していきます．
inputタグ内にname属性として画像固有のIDを保持して置くことで，個別に削除ができるようにしています．
削除ボタンが押されると，getElementById(img-xxx)の形で対象要素を取得し，remove()を行います．

./js/main.js

let key = 0;
function loadImage(obj) {
    for (i = 0; i < obj.files.length; i++) {
        var fileReader = new FileReader();
        fileReader.onload = (function (e) {
            var field = document.getElementById("imgPreviewField");
            var figure = document.createElement("figure");
            var rmBtn = document.createElement("input");
            var img = new Image();
            img.src = e.target.result;
            rmBtn.type = "button";
            rmBtn.name = key;
            rmBtn.value = "削除";
            rmBtn.onclick = (function () {
                var element = document.getElementById("img-" + String(rmBtn.name)).remove();
            });
            figure.setAttribute("id", "img-" + key);
            figure.appendChild(img);
            figure.appendChild(rmBtn)
            field.appendChild(figure);
            key++;
        });
        fileReader.readAsDataURL(obj.files[i]);
    }
}

CSSで画像を横並びにする

figureタグにdisplay:inline-block;を設定することで画像を横並びに表示します．
お好みで見た目を整えたら完成です．

./css/style.css

div figure{
    display: inline-block;
}
body{
    padding-top: 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
}

おわりに

同じようなことをやっている方はいたのですが，RubyやJQueryを使用していたり，JavaScript内にHTMLを直書きしていたりといった感じが多かったので，思い切って初投稿してみました．改善点などあれば，是非ご指導ください．

参考にしたサイト

JavaScriptでFileReaderを使った複数画像のプレビュー例

HTMLとJavaScriptだけで複数の画像ファイルのアップロードとプレビュー