ファイルアップロードスタイルの詳細を実装するjs

ファイルアップロードスタイルの詳細を実装するjs

1. 概要

この js には、ボタン スタイル、リスト スタイル、削除、追加、ズーム (組み込みのズーム機能を使用して、ポップアップ ウィンドウを表示するための API を提供) が含まれています。

聴けるイベント価値
onlargeClickCallBack独自のポップアップ ウィンドウを使用する場合は、この関数をリッスンし、戻り値を取得して、それをポップアップ ウィンドウの img->href に割り当てるだけです。 imgFileオブジェクト(クリックされた画像のすべての情報を含む)(これはjsの唯一のグローバルオブジェクトであり、ここですべての値を取得できます)
ダイアログを閉じる前に組み込みポップアップウィンドウが閉じられるためのコールバックobject 戻り値はオブジェクトオブジェクトです。event -> 実行されたイベントのソースイベントオブジェクト。imgFile -> ポップアップウィンドウをクリックして閉じた場合、ポップアップウィンドウに現在表示されている画像オブジェクト情報
画像リストの追加追加された画像ごとにコールバックファイル -> ファイルオブジェクト -> (これは js の唯一のグローバルオブジェクトです。ここですべての値を取得できます)

2. オブジェクト作成のパラメータ

パラメータ意味
最大ファイル長存在できるファイルの最大数は、デフォルトでは 2 です。
最大ファイルサイズ各ファイルの最大ファイルサイズのデフォルト値は 1024 (1M) です。
ファイルサフィックスアップロードできるファイル拡張子のデフォルト値は次のとおりです: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png']
停止ダイアログデフォルトのポップアップウィンドウを開かないようにするかどうか。デフォルト値: false
シェードダイアログスタイル組み込みのポップアップウィンドウオプションがオンになっている場合、ポップアップウィンドウの高さと幅を制御します。デフォルト値: [null, null]、デフォルトは null で、適応的です。パーセンテージと px を設定する場合は、配列 [0,1] を直接変更してください。配列の最初の項目は幅を表し、2 番目の項目は高さを表します。
表示ボタン画像スタイルボタンスタイルを有効にするかどうか。デフォルト値: false

使用コード例:

        <div class="hj-file">
            <input type="file" ファイル="" class="hj-file-input">
            <div class="hj-box hj-append-item">
                <div class="append-item margin-class">
                    <div class="img-push">
                        <img src="./img/push.png" alt="">
                    </div>
                </div>
            </div>
           <!-- ボタン スタイルが有効になっていない場合、この外側の div は削除できます -->
            <div class="hj-btn-box hj-hidden">
                <div class="hj-btn">
                    画像を選択</div>
            </div>
            <!-- ファイル情報リスト-->
            <div class="hj-file-list">
            </div>
        </div>
var ファイル = 新しいファイル({
     最大ファイル長: 2,
     最大ファイルサイズ: 1024,
     ファイルサフィックス: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
     停止ダイアログ: false、
     表示ボタン:false
 });
 initHJFile(ファイル);

3. 監視例

//組み込みのポップアップ ウィンドウを使用しない場合は、ファイル オブジェクトの onlargeClickCallBack 関数をリッスンすることを選択できます。file.callBack.onlargeClickCallBack = function (img, that) {}
file.callBack.ondialogBeforeClose = 関数 (イベント) {}
file.callBack.onaddImgList = 関数 () {}

4. 使用方法

プロジェクト ディレクトリは上図のとおりです。使用したい場合は、プロジェクト パスにjsを配置し、 staticディレクトリ (静的リソース パス) にimgを配置するだけです。
ここで js で紹介されているデフォルトのアイコンは ./ の相対パスです。検索してプロジェクトのファイルパスに変更してください。上記のプロジェクト例は、直接開いて表示できる完全なパッケージです。ダウンロード アドレスは後で提供されます。

5. ソースコード

このソースコードにはアイコンは含まれておらず、すべてが1つのHTMLページに含まれています。

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

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<スタイル>
    * {
        パディング: 0;
        マージン: 0;
    }

    体 {
        幅:100vw;
        高さ:100vh;
        /* ディスプレイ: flex;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。*/
    }

    /* 。箱 {
        幅: 600ピクセル;
    } */



    .hjファイル{
        幅: 100%;
        /* 高さ: 100%; */

    }

    .hj-ファイル入力 {
        表示: なし;
    }

    .hj-box {
        ディスプレイ: フレックス;
        flex-wrap: ラップ;
    }

    .append-item {
        幅: 150ピクセル;
        高さ: 150px;
        境界線: 1px 破線 #b1b5bb;
        境界線の半径: 5px;
        背景色: #fbfdff;
        ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。
        マージン: 10px;
        コンテンツの中央揃え: 中央;
    }

    .画像アイテム{
        幅: 150ピクセル;
        高さ: 150px;
        境界線の半径: 5px;
        マージン: 10px;
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        境界線: 1px実線 #eaedf1;
        位置: 相対的;
        背景サイズ: 100% 100%;
        背景繰り返し: 繰り返しなし;
        遷移: 1秒;
        アニメーション: 翻訳者 1 秒;
    }

    .image-item-delete {
        アニメーション: 下部トランスレータ .7 秒;
    }

    @keyframes トランスレータ {
        0% {
            不透明度: .2;
            変換: translate(0, -50%);
        }

        100% {
            不透明度: 1;
            変換: translate(0);
        }
    }

    @keyframes 下部トランスレータ {
        0% {
            不透明度: 1;
            変換: translate(0, 0);
        }

        100% {
            不透明度: .2;
            変換: translate(0, 50%);
        }
    }

    .img-push画像{
        幅: 60ピクセル;
        高さ: 60px;
    }

    .append-item:hover {
        境界線の色: #00d2fc;
    }

    .マージンクラス {
        下マージン: 20px;
    }

    。初め {
        背景画像: url('./img/66.jpg');
    }

    .z-index-promote {
        zインデックス: 3;
    }

    .largeImg 画像 {
        カーソル: ポインタ;
        幅: 30ピクセル;
        高さ: 30px;
        遷移: .6 秒;
        表示: なし;
    }

    .deleteImg 画像 {
        カーソル: ポインタ;
        幅: 40px;
        高さ: 40px;
        表示: なし;
    }

    .image-item:hover::before {
        コンテンツ: "";
        zインデックス: 2;
        背景色: #42393999;
        幅: 100%;
        位置: 絶対;
        高さ: 100%;
        境界線の半径: 5px;
        遷移: .6 秒;
        アニメーション: 透明度線形 .6 秒;
    }

    .image-item:hover .largeImg 画像 {
        表示: ブロック;
        アニメーション: 透明度線形 .6 秒;
    }

    .image-item:hover .deleteImg 画像 {
        表示: ブロック;
        アニメーション: 透明度線形 .6 秒;
    }

    @keyframes 透明度
        0% {
            不透明度: 0;
        }

        100% {
            不透明度: 1;
        }
    }

    .hj-シェード{
        幅:100vw;
        高さ:100vh;
        背景色: #302d2d99;
        位置: 固定;
        オーバーフロー: 非表示;
        zインデックス: 1978;
        ディスプレイ: フレックス;
        左: 50%;
        上位: 50%;
        変換: translate(-50%, -50%);
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        アニメーション: hj-shade-saccle .5s;
    }

    @keyframes hj-shade-shadow {
        0% {
            変換: 変換(-50%, -50%) スケール(0%);
        }

        100% {
            変換: 変換(-50%, -50%) スケール(100%);
        }
    }

    @keyframes hj-shade-hidden {
        0% {
            変換: 変換(-50%, -50%) スケール(100%);
        }

        100% {
            変換: 変換(-50%, -50%) スケール(0%);
        }
    }

    .hj-シェード-隠し{
        アニメーション: hj-shade-hidden .5s;
    }

    .hj-シェード{
        オーバーフロー:自動;
    }

    .hj-shade .hj-box {
        幅: 60%;
        高さ: 80%;
        パディング: 20px 10px 10px 10px;
        背景サイズ: 100% 100%;
        背景色: 白;
    }

    .hj-shade .hj-box .hj-img {
        幅: 100%;
        オーバーフロー:自動;
        高さ: 100%;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目 {
        背景色: 白;
        色: #8cacb3;
        ディスプレイ: フレックス;
        行の高さ: 2;
        フォントサイズ: 0.8em;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目:hover {
        背景色: #00d2fc70;
        色: 白;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目 .hj-left {
        幅: 30%;
        オーバーフロー: 非表示;
        空白: ラップなし;
        テキストオーバーフロー: 省略記号;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目 .hj-左スパン {
        左マージン: 20px;
        カーソル: ポインタ;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目 .hj-right {
        幅: 30%;
        ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。
        コンテンツの正当化: 終了;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目 .hj-right span {
        右マージン: 20px;
    }

    .hj-ファイルリスト .hj-ファイルリスト項目 .hj-right img {
        幅: 20px;
        高さ: 20px;
        カーソル: ポインタ;
    }

    @keyframes hj-list-hidden {
        0% {
            不透明度: 1;
        }

        100% {
            不透明度: 0;
        }
    }

    .hj-リスト-隠し{
        アニメーション: hj-list-hidden .7s;
    }

    .hj-btn-box {
        下部マージン: 25px;
    }

    .hj-btn-box .hj-btn {
        左マージン: 20px;
        カーソル: ポインタ;
        背景色: #009efa;
        幅: 30%;
        行の高さ: 2;
        境界線の半径: 4px;
        色: 白;
        フォントサイズ: 1.2em;
        テキスト配置: 中央;
    }

    .hj-隠し{
        表示: なし;
    }
</スタイル>

<本文>
    <div class="box">
        <div class="hj-file">
            <input type="file" ファイル="" class="hj-file-input">
            <div class="hj-box hj-append-item">
                <div class="append-item margin-class">
                    <div class="img-push">
                        <img src="./img/push.png" alt="">
                    </div>
                </div>
            </div>
            <div class="hj-btn-box hj-hidden">
                <div class="hj-btn">
                    画像を選択</div>
            </div>
            <div class="hj-file-list">
            </div>
        </div>
    </div>

    <スクリプト>
        // ファイルコンストラクタ関数 File(obj) {
            // ファイルの合計数 this.fileLength = 0;
            // ファイル配列 this.fileList = [];
            // オブジェクトパラメータ設定ファイル this.config = {
                // 最大ファイル数 maxFileLength: obj.maxFileLength || 2,
                // 最大ファイルサイズ maxFileSize: obj.maxFileSize || 1024,
                // 許可されるファイルサフィックス fileSuffix: obj.fileSuffix || ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'jpg', 'png'],
                // デフォルトのポップアップウィンドウ StopDialog を開かないようにするかどうか: obj.StopDialog || false,
                // ポップアップウィンドウのスタイルの幅と高さ shadeDialogStyle: obj.shade || [null, null],
                // ボタンスタイルを有効にするかどうか showBtnImgStyle: obj.showBtn || false,
            };
            //fileDomに保存される唯一のDOMノード this.dom = {
                // 入力ファイル選択入力ボックス dom
                入力Dom: null、
                // 追加項目クリックDOMを追加
                イメージアイテムDom: null、
                // 画像のDOMをhj-append-itemノードに追加する
                追加アイテムDom: null、
                // hj-file-listノードの後に​​画像リストのDOMを追加する
                appendListDom: null、

            };
            // イベント処理オブジェクト this.event = {
                    // 項目追加クリックイベント処理 imageItemClick: () => {
                        クリックすると、入力した内容がリストされます。
                    },
                    // 画像イベント処理を選択した後の入力ファイル選択入力ボックス changeLoadFile: (file) => {
                        this.method.filterFile(file.target.files);
                    },
                    // 画像削除イベント imgDeleteClick: (id) => {
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (this.fileList[index].id == id) {
                                _before = this.fileList.slice(0, index == this.fileList.length ? index - 1 とします:
                                    索引);
                                _after = this.fileList.slice(index + 1); とします。
                                _before = _before.concat(_after);
                                // 画像を削除します this.method.deleteImg(id);

                                タイムアウトを設定する(() => {
                                    this.fileList[インデックス].dom.remove();
                                    this.fileList[インデックス].listDom.remove();
                                    this.fileLength--;
                                    this.fileList = _before;
                                }, 600);
                                壊す;
                            }
                        }
                        1

                    },
                    // 画像拡大イベント imgLargeClick: (id) => {
                        imgFile を this.privateUtils.foreachFileListToId(id) とします。
                        console.log(画像ファイル);
                        this.callBack.onlargeClickCallBack(imgFile、this);
                        if (this.config.StopDialog) が戻り値:
                        hjShadeDiv を document.getElementsByClassName('hj-shade') に設定します。
                        hjShadeDiv.length != 0 の場合、戻り値:
                        div = document.createElement('div'); とします。
                        div.className = 'hj-shade';
                        div2 = document.createElement('div'); とします。
                        div2.className = 'hj-box';
                        img = document.createElement('img'); とします。
                        img.className = 'hj-img';
                        img.src = imgFile.base64;
                        div2.appendChild(画像);
                        div.addEventListener('click', (イベント) => {
                            this.callBack.ondialogBeforeClose({
                                イベント: イベント、
                                画像ファイル: 画像ファイル、
                            });
                            div.className = div.className + 'hj-shade-hidden';
                            タイムアウトを設定する(() => {
                                document.body.removeChild(div);
                            }, 500);
                        })
                        // ボタンモードで最初の読み込みが完了しておらず高さが0になる異常な状況を防ぐ img.onload = () => {
                            div.appendChild(div2);
                            ドキュメントのbodyに子要素を追加します。
                            this.privateUtils.computeDialogWH(img、div2);
                        }

                    },
                },
                このメソッド = {
                    // 画像をフィルタリングする filterFile: (list) => {
                        for (let index = 0; index < list.length; index++) {
                            size = parseInt(list[index].size / 1024)とします。
                            接尾辞 = list[index].name.substring(list[index].name
                                .lastIndexOf('.') + 1);
                            // サフィックスに適合するかどうか let isTrue = false;
                            // ファイルサイズを決定する if (size > this.config.maxFileSize) {
                                console.log("ファイルが大きすぎます");
                                壊す;
                            }
                            (j = 0 とします; j < this.config.fileSuffix.length; j++) {
                                if (サフィックス == this.config.fileSuffix[j]) {
                                    isTrue = 真;
                                    壊す;
                                }
                            }
                            真の場合
                                id = parseInt(Math.random() * 100000); とします。
                                this.fileList.push({
                                    id: id、
                                    ファイル: リスト[インデックス],
                                    base64: ''、
                                    ドメイン: ''、
                                    リストドメイン: ''、
                                });
                                console.log(このファイルリスト);
                                this.method.streamToImgBase64(リスト[インデックス]、id);
                            } それ以外 {
                                console.log("ファイル拡張子が一致しません");
                            }
                        }
                    },
                    // 画像表示処理 streamToImgBase64: (file, id) => {
                        var fileReader = 新しい FileReader();
                        fileReader.onload = (データ) => {
                            this.method.appendImage(data.target.result, id);
                        }
                        fileReader.readAsDataURL(ファイル);

                    },
                    // 画像をDOMノードに追加します appendImage: (url, id) => {
                        div = document.createElement('div'); とします。
                        div.className = '画像項目のマージンクラス';
                        div.style.backgroundImage = 'url(' + url + ')';
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (this.fileList[index].id == id) {
                                this.fileList[インデックス].dom = div;
                                this.fileList[インデックス].base64 = url;
                                壊す;
                            }
                        }
                        // DOM の作成と削除はすべて addEventListener を使用して行います
                        largeDom を document.createElement('div') にします。
                        largeDom.className = 'largeImg z-index-promote';
                        largeDom.innerHTML = `<img src="./img/big.png" alt="">`;
                        largeDom.addEventListener('クリック', () => {
                            イベント ID を取得する
                        })
                        deleteDom = document.createElement('div'); を作成します。
                        deleteDom.className = 'deleteImg z-index-promote';
                        deleteDom.innerHTML = `<img src="./img/delete.png" alt="">`;
                        deleteDom.addEventListener('click', () => {
                            this.event.imgDeleteClick(id);
                        })
                        div.appendChild(largeDom);
                        div.appendChild(Dom を削除)
                        div にアイテムを追加します。
                        this.fileLength++;
                        // 画像リストを追加します this.method.addImgList(id);
                    },
                    // 画像を削除する deleteImg: (id) => {
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (this.fileList[index].id == id) {
                                item = this.fileList[index]とします。
                                cless = item.dom.getAttribute('class'); とします。
                                clessList を item.listDom.getAttribute('class'); とします。
                                this.fileList[index].dom.setAttribute("class", cless + " image-item-delete");
                                this.fileList[index].listDom.setAttribute("class", clessList + " hj-list-hidden ")
                                壊す;
                            }
                        }
                    },
                    // 画像リストを追加 addImgList: (id) => {
                        ファイルを this.privateUtils.foreachFileListToId(id) とします。
                        this.callBack.onaddImgList(ファイル、this);
                        div = document.createElement('div'); とします。
                        div.className = 'hj-ファイルリスト項目'
                        div$left = document.createElement('div'); とします。
                        div$right = document.createElement('div'); とします。
                        ファイル$img = document.createElement('img');
                        fileSize を this.privateUtils.computeFileSize(file.file.size) とします。
                        ファイル$img.src = './img/delete-balck.png';
                        div$left.className = 'hj-left';
                        div$right.className = 'hj-right';
                        div$left.innerHTML = `<span>${file.file.name}</span>`
                        div$right.innerHTML = `<span>${fileSize}</span>`;
                        div$left.addEventListener('click', () => {
                            イベント ID を取得する
                        })
                        ファイル$img.addEventListener('click', () => {
                            this.event.imgDeleteClick(id);
                        })
                        div$right.appendChild(ファイル$img);
                        div.appendChild(div$left);
                        div.appendChild(div$right);
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (id == this.fileList[index].id) {
                                this.fileList[インデックス].listDom = div;
                                壊す;
                            }
                        }
                        this.dom.appendListDom.appendChild(div);

                    },
                }
            // 公開された監視 API
            this.callBack = {
                    // デフォルトのポップアップウィンドウが開かないようにする onlargeClickCallBack: (img, that) => {},
                    // 組み込みポップアップウィンドウが閉じられたときのコールバック // {event: クリックのソースイベントオブジェクト imgFile: 閉じられる画像のグローバルファイルオブジェクト情報}
                    ondialogBeforeClose: (オブジェクト) => {},
                    // 画像リストが追加されるたびにコールバック onaddImgList: (file, that) => {},
                },
                this.privateUtils = {
                    foreachFileListToId: (id) => {
                        for (let index = 0; index < this.fileList.length; index++) {
                            if (id == this.fileList[index].id) {
                                this.fileList[index]を返します。
                            }
                        }
                    },
                    ファイルサイズを計算する: (サイズ) => {
                        結果をparseInt(size / 1024)とします。
                        (結果<1024)の場合{
                            結果 + '.KB' を返します。
                        } そうでない場合 (結果 >= 1024) {
                            parseInt(result / 1024) + ".MB" を返します。
                        }
                    },
                    // ポップアップウィンドウの高さと長さを計算します。computeDialogWH: (img, dom) => {
                        w = this.config.shadeDialogStyle[0] とします。
                        h = this.config.shadeDialogStyle[1]とします。
                        w2 = img.naturalWidth とします。
                        h2 = img.naturalHeight とします。
                        if (w2 > window.innerWidth * 0.9) {
                            w2 = ウィンドウの内側の幅 * 0.7;
                            h2 = ウィンドウの内側の高さ * 0.7;
                        }
                        dom.style.width = w == null ? w2 + "px" : w;
                        dom.style.height = h == null ? h2 + "px" : h;
                    }
                }
        }
        var ファイル = 新しいファイル({
            最大ファイル長: 2,
            最大ファイルサイズ: 1024,
            ファイルサフィックス: ['mp4', 'mp3', 'word', 'pdf', 'ppt', 'excel', 'png', 'jpg'],
            停止ダイアログ: false、
            表示ボタン:false
        });
        initHJFile(ファイル);
        // 組み込みのポップアップ ウィンドウを使用しない場合は、ファイル オブジェクトの onlargeClickCallBack 関数をリッスンすることを選択できます。file.callBack.onlargeClickCallBack = function (img, that) {}
        file.callBack.ondialogBeforeClose = 関数 (イベント) {}
        file.callBack.onaddImgList = 関数 () {}
        // DOMノードの追加などの初期情報をロードする function initHJFile(file) {
            console.log(ファイル);
            input_dom = document.getElementsByClassName('hj-file-input')[0] とします。
            imageItem_dom = document.getElementsByClassName('append-item')[0] とします。
            appendItem_dom = document.getElementsByClassName('hj-append-item')[0] とします。
            appendList_dom = document.getElementsByClassName('hj-file-list')[0] とします。
            ファイル.dom.inputDom = input_dom;
            file.dom.imageItemDom = imageItem_dom;
            ファイル.dom.appendListDom = appendList_dom;
            if (file.config.showBtnImgStyle) {
                // ボタン モードをオンにします appendItem_dom.style.display = 'none';
                btn = document.getElementsByClassName('hj-btn-box');
                コンソールにログ出力します。
                btn.length != 0 の場合
                    btn[0].className = 'hj-btn-box';
                    btn[0].children[0].addEventListener('click', file.event.imageItemClick);
                } それ以外 {
                    console.log("btn クラスが見つかりません");
                    新しいエラーをスローします('ボタン モードに必要な HTML が定義されていません')
                }
            }
            ファイル.dom.appendItemDom = appendItem_dom;
            file.dom.imageItemDom.addEventListener('クリック', file.event.imageItemClick);
            file.dom.inputDom.addEventListener('change', file.event.changeLoadFile)
        }
    </スクリプト>
</本文>

</html>

js でファイルアップロードスタイルを実装する詳細に関するこの記事はこれで終わりです。js でファイルアップロードスタイルを実装する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法
  • Ckeditor + Ckfinderを使用したJavaScriptファイルアップロードケースの詳細な説明
  • Node.jsはexpress-fileuploadミドルウェアを使用してファイルをアップロードします
  • jQuery は非同期ファイルアップロードを実装します ajaxfileupload.js
  • JavaScript ベースの大容量ファイルアップロードのバックエンドコード例
  • JSはブレークポイントを使用してファイルのアップロードを再開し、コード分析を実現できます。
  • JSのFormDataクラスはファイルのアップロードを実装します
  • JSのFileReaderクラスは、ファイルアップロードのタイムリーなプレビュー機能を実装します。

<<:  Dockerコンテナの入退出方法の詳細な説明

>>:  スプライトとフォントアイコンを実装するためのCSS

推薦する

Dreamweaver で Zen コーディングを使用する方法

前回の記事「Zen Coding: HTML/CSS コードを素早く記述する方法」を公開した後、一部...

Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます

Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...

純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する

1. 効果を達成する 2 知識ポイント2.1 <label> タグHTML では、<...

ウェブ開発におけるクロスドメインの理由に対する複数のソリューション

目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

優れたウェブフロントエンドデザインの指標

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...

JavaScript でオブジェクトをエレガントに扱う 6 つの方法

目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....

Linux がますます人気になっている 10 の理由

Linux はますます多くのユーザーに愛されてきました。なぜ Linux はこれほど急速に発展し、い...

Tomcat maxPostSize設定実装プロセス分析

1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...

mysqldump を使用した MySql のインポートおよびエクスポート方法の概要

データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...

Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

MySQL準備原理の詳細な説明

準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...