写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像を選択したり、写真を撮影してアップロードしたりすることがあります。 <input type="file"/>を単純に使用してもこの機能は実現できますが、ユーザーエクスペリエンスが少し悪くなる可能性があります。そのため、この記事では、画像を選択した後のプレビューと圧縮アップロード機能を実現するための CSS + JS の使用を記録します。その一部はインターネットから取得したもので、ここに記録および整理されています。

効果プレビュー:

1. index.htmlを作成する

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">
        <title>写真のアップロード</title>
        <link rel="スタイルシート" href="index.css"/>
        <script type='text/javascript' src='index.js' charset='utf-8'></script>
    </head>
    <本文>
         <フォームid="メインフォーム">
            <div class="content">
                <div class="label">ID カード</div>
                <div class="img-area">
                    <div class="コンテナ">
                        <input type="file" id='id-face' name='face' accept="image/*" />
                        <div id='顔の空の結果'>
                            <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身分証明書の表面の写真</p>
                        </div>
                        <img スタイル='幅: 100%' id='顔結果'/>
                    </div>
                    <div class="container" style='margin-top:0.5rem;'>
                        <input type="file" id='id-back' name='back' accept="image/*" />
                        <div id='戻る空の結果'>
                            <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身分証明書の裏面の写真</p>
                        </div>
                        <img style='width: 100%' id='back-result'/>
                    </div>
                </div>
            </div>
            <div class="btn">
                送信</div>
         </フォーム>
    </本文>
</html>

2. index.cssを作成する

体{
    マージン: 0
}
。コンテンツ{
    パディング:0.5rem;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    下境界線: 1px #999 実線
}
。ラベル{
    幅:5rem;
}
.img-エリア{
    フレックス:1
}
。容器{
    背景色:#e7e7e7;
    位置: 相対的;
}
.コンテナdiv{
    テキスト配置: 中央;
    パディング:0.5rem 0
}
.コンテナ入力{
    不透明度:0;
    フィルター:アルファ(不透明度=0);
    高さ: 100%;
    幅: 100%;
    位置: 絶対;
    上: 0;
    左: 0;
    zインデックス: 9;
}
.コンテナ p{
    フォントサイズ: 0.9rem;
    色:#999
}
.btn{
    背景色: #4363ab;
    色: #fff;
    テキスト配置: 中央;
    パディング: 0.5rem 1rem;
    幅:80%;
    境界線の半径: 0.2rem;
    マージン: 2rem 自動;
    フォントの太さ: 600;
    フォントサイズ: 1.2rem
}

3. index.jsを作成する

window.onload = 関数(){
    document.getElementById("id-face").addEventListener("change", function(){       
        onFileChange(this、"face-result"、"face-empty-result")
    });
    document.getElementById("id-back").addEventListener("change", function(){       
        onFileChange(this、back-result、back-empty-result) は、
    });
    document.getElementsByClassName("btn")[0].addEventListener("click", function(){       
        提出する（）;
    });
};
/**
 * 画像が選択されたときの処理* @param {*} fileObj 入力ファイル要素* @param {*} el //選択後に画像を表示するために使用する要素ID
 * @param {*} btnel //画像が選択されていないときに表示されるボタン領域ID
 */
関数 onFileChange(fileObj,el,btnel){
    var windowURL = window.URL || window.webkitURL;
    var データURL;
    var imgObj = document.getElementById(el);
    document.getElementById(btnel).style.display="なし";
    imgObj.style.display="ブロック";
    fileObj && fileObj.files && fileObj.files[0] の場合 {
        データURL = windowURL.createObjectURL(fileObj.files[0]);
        imgObj.src=データURL;
    } それ以外 {
        データURL = fileObj.値;
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
    }
}
/**
 * 画像を圧縮し、データを base64 形式で返します* @param {*} image 画像要素* @param {*} width 圧縮画像の幅* @param {*} height 圧縮画像の高さ* @param {*} qua // 画像品質 1-100
 */
関数compressImageTobase64(画像,幅,高さ,qua){
    var quality = qua ? qua / 100 : 0.8;
    var キャンバス = document.createElement("キャンバス"),     
        ctx = キャンバス.getContext('2d');     
    var w = image.naturalWidth、     
        h = イメージの自然な高さ;     
    キャンバスの幅 = 幅||w;     
    キャンバスの高さ = 高さ||h;     
    ctx.drawImage(画像, 0, 0, w, h, 0, 0, 幅||w, 高さ||h);
    var data = canvas.toDataURL("image/jpeg", 品質);     
    データを返します。
}
//送信関数submit(){
    //1. フォームの送信 //document.getElementById("mainForm").submit();
    //2. 圧縮後の Ajax 送信 var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);
    var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);
    var フォームデータ = 新しいフォームデータ();  
    フォームデータを追加します。("face"、face_data);
    formData.append("戻る",back_data);
    //jQueryを導入する必要がある
    $.ajax({
        url:"/アドレス",
        タイプ: 'POST'、
        キャッシュ: false、
        データ: フォームデータ、
        タイムアウト:180000、
        プロセスデータ: false、
        コンテンツタイプ: false、
        成功:function(r){
        },
        エラー:関数(r){  
        }
   });
}

ソースコード: Githubアドレス

要約する

上記は、写真のプレビューと写真のアップロード機能を実現するために私が紹介した html+css+js です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: MySQLインデックスが失敗するいくつかの状況の詳細な分析

>>: Vue で AES.js を使用する詳細な手順