まえがき: Web ページを作成するときに、写真を選択したり、アップロードする写真を撮ったりすることがよくありますが、この方法でも機能は実現できますが、ユーザー エクスペリエンスが<input type=file/>する可能性があります。少し違うので、この記事では、画像を選択した後のプレビュー機能と圧縮アップロード機能を実装するための css+js の使用方法を記録します。一部の情報はインターネットから得たものであり、ここに記録され、整理されています。
エフェクトのプレビュー:
1.index.htmlの作成<!DOCTYPE html><html> <head> <meta charset=UTF-8> <meta name=viewport content=width=デバイス幅、initial-scale=1.0、maximum-scale=1.0、user-scalable=no> <title>写真を撮ってアップロード</title> <link rel=stylesheet href=index.css/> <script type='text/javascript' src='index.js' charset='utf-8'></script> </head> <body> <form id=mainForm> <div class=content> <div class=label>IDカード</div> <div class=img-area > <div class=container> <input type=file id='id-face' name='face' accept=image/* /> <div id='face-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>ID カードの正面写真</p> </div > <img style='width: 100%' id='face-result'/> </div> <div class=container style='margin-top:0.5rem;'> <input type=file id='id-back' name='back' accept=image/* /> <div id='back-empty-result'> <img style='width:4rem' src=https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true <p>ID カードの裏面の写真</p> </div> <img style='width: 100%' id='back-result'/> </div> </div> </div> <div class = btn> 送信</div> </form> </body></html>2.index.cssを作成
body{ マージン: 0}.content{ パディング: 0.5rem; 表示: align-items: center; border-bottom: 1px #999 ソリッド}.label{ width:5rem;}.img-area{ flex:1} .container{ 背景色:#e7e7e7; 位置: 相対;}.container div{ テキスト整列: センター: 0.5rem 0}.コンテナ入力{ 不透明度: 0; フィルタ: アルファ(不透明度=0); 高さ: 100%; 左: 0; } p{ フォントサイズ: 0.9rem; カラー: #999}.btn{ 背景色: #4363ab; テキスト整列: 中央;パディング: 0.5rem 1rem; 幅: 80%; マージン: 2rem 自動; フォントサイズ: 1.2rem 3.index.jsを作成するwindow.onload=function(){ document.getElementById(id-face).addEventListener(change, function(){ onFileChange(this,face-result,face-empty-result) }); .addEventListener(change, function(){ onFileChange(this,back-result,back-empty-result) }); document.getElementsByClassName(btn)[0].addEventListener(click, function(){ submit(); });};/** * 画像選択時の処理* @param {*} fileObj 入力ファイル要素* @param {*} el //画像選択時に表示される要素のID * @param {*} btnel //画像非選択時に表示されるボタン領域のID */function onFileChange(fileObj,el,btnel){ var windowURL = window.webkitURL || var dataURL = document.getElementById(btnel).style.display=none; .display=block; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.src=dataURL; } else { dataURL = fileObj.style.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=スケール); imgObj.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src = dataURL; }}/** * 画像を圧縮した後の Base64 形式のデータを返します* @param {*} 画像の img 要素* @param {*} 圧縮後の幅画像幅* @param {*} 高さ 圧縮画像高さ* @param {*} qua //画質 1-100 */function compressImageTobase64(image,width,height,qua){ varquality = qua ? qua / 100 : 0.8; var Canvas = document.createElement(canvas), ctx = Canvas.getContext('2d'); h = image.naturalHeight; Canvas.width = 幅||w; Canvas.height = 高さ||h; ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h); var data = Canvas.toDataURL(image/jpeg, 品質); }//送信function submit(){ //1. 圧縮後の Ajax 送信変数 //document.getElementById(mainForm).submit(); face_data=compressImageTobase64(document.getElementById(face-result),200,100,90); var back_data=compressImageTobase64(document.getElementById(back-result),200,100,90); var formData = new FormData(face); 、顔データ); formData.append(back,back_data); //jQuery を導入する必要があります $.ajax({ url:/address, type: 'POST', キャッシュ: false, data: formData, timeout:180000, processData: false, contentType: false、成功:function(r){ }、エラー:function(r){ } });}ソースコード：Githubアドレス
要約する上記は、写真の撮影、プレビュー、アップロードの機能を実装するために編集者によって導入された html+css+js です。ご質問がある場合は、私にメッセージを残してください。編集者が対応します。時間内に返信してください。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！