アップロード画像コントロールを実現するネイティブ js

<div class="カード">
    <input id="アップロード" type="ファイル" accept=".jpg" />
    <div class="view">
        <!-- アップロードが成功した後 -->
        <div id="imgContainer" class="img-container">
            <画像id="画像" />
            <!-- マウスを動かすとビューが表示され、操作が削除されます-->
            <div class="img-mask">
                <span id="showImg">表示</span>
                <span id="delImg">削除</span>
            </div>
        </div>
        <!-- アップロードが成功するまで -->
        <span id="icon">+</span>
    </div>
</div>

.カード{
    位置: 相対的;
    幅: 200ピクセル;
    高さ: 140px;
    パディング: 5px;
    右マージン: 20px;
    境界線: 1px 破線 #d9d9d9;
    境界線の半径: 6px;
    マージン: 300px 自動;
}

.カード入力{
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    不透明度: 0;
    カーソル: ポインタ;
}

.カード .ビュー {
    幅: 100%;
    高さ: 100%;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

.card .view #アイコン {
    表示: インラインブロック;
    フォントサイズ: 30px;
}

.カード .ビュー .img-コンテナ {
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    表示: なし;
}

.img-コンテナ画像 {
    幅: 100%;
    高さ: 100%;
}

.imgコンテナ .imgマスク {
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    不透明度: 0;
    背景: rgba(0, 0, 0, .3);
    遷移: すべて 0.5 秒の緩和;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

.img-コンテナ:hover .img-マスク {
    不透明度: 1;
}

.img-マスクスパン{
    色: #fff;
    マージン: 0 10px;
    カーソル: ポインタ;
}

<スクリプト>
    定数アップロード = document.getElementById('アップロード');
    const imgContainer = document.getElementById('imgContainer');
    定数img = document.getElementById('img');
    const icon = document.getElementById('icon');

    imgUrl = '' とします。
    // 画像が正常にアップロードされた後に URL を作成します
    upload.onchange = 関数 (値) {
        const fileList = value.target.files;
        if (ファイルリストの長さ) {
            imgContainer.style.display = 'ブロック';
            icon.style.display = 'なし';
            imgUrl = window.URL.createObjectURL(fileList[0]);
            テキストファイル img.src
        }
    }
<スクリプト>

<!-- 画像をプレビューするためのモーダル ボックス -->
<div id="モーダル">
    <span id="closeIcon">閉じる</span>
    <div class="content">
        <img id="modalImg">
    </div>
</div>

/* モーダルスタイル */
#モーダル{
    位置: 固定;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    幅: 0;
    高さ: 0;
    ボックスの影: 0 0 10px #d9d9d9;
    背景: rgba(0, 0, 0, .3);
    /* 遷移: すべて .1s のイーズインアウト; */
    オーバーフロー: 非表示;
}

#モーダル.コンテンツ{
    ボックスのサイズ: 境界線ボックス;
    幅: 100%;
    高さ: 100%;
    パディング: 45px 20px 20px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
}

#モーダル #モーダル画像 {
    高さ: 100%;
}

#モーダル #閉じるアイコン {
    位置: 絶対;
    上: 10px;
    右: 10px;
    カーソル: ポインタ;
}

/* ...上記のコードを続けます*/
定数 showImg = document.getElementById('showImg');
定数 delImg = document.getElementById('delImg');
定数 modal = document.getElementById('modal');
modalImg は、 document.getElementById('modalImg') に格納されます。
closeIcon は、 document.getElementById('closeIcon') に格納されます。

// クリックして画像をプレビューします showImg.onclick = function () {
    modal.style.width = '100%';
    modal.style.height = '100%';
    modalImg.src = imgUrl;
}

// モーダルボックスを閉じる closeIcon.onclick = function () {
    モーダルスタイルの幅 = '0';
    modal.style.height = '0';
    modalImg.src = '';
}

// アップロードした画像を削除する delImg.onclick = function () {
    アップロード値 = '';
    画像URL = '';
    icon.style.display = 'ブロック';
    imgContainer.style.display = 'なし';
}