html+css+js で写真のプレビューとアップロード画像機能の共有を実装-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

html+css+js で写真のプレビューとアップロード画像機能の共有を実装

小云云

Jan 16, 2018 pm 04:41 PM

javascript

Web ページを作成するときに、写真を選択したり、写真を撮ってアップロードする必要があることがよくあります。この方法でも機能は実現できますが、ユーザーエクスペリエンスが低下する可能性があります。この記事では、画像選択後のプレビュー機能と圧縮アップロード機能を実装するための CSS+JS の使用を記録しています。一部の情報はインターネットから得たもので、ここに記録され、整理されています。

効果のプレビュー:

1.index.html

<input type="file"/>

を作成します2.index.cssを作成します

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>拍照上传</title>
        <link rel="stylesheet" href="index.css"/>
        <script type=&#39;text/javascript&#39; src=&#39;index.js&#39; charset=&#39;utf-8&#39;></script>
    </head>
    <body>
         <form id="mainForm">
            <p class="content">
                <p class="label">身份证</p>
                <p class="img-area">
                    <p class="container">
                        <input type="file" id=&#39;id-face&#39; name=&#39;face&#39;  accept="image/*" />
                        <p id=&#39;face-empty-result&#39;>
                            <img src="/static/imghwm/default1.png"  data-src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true"  class="lazy"  style=&#39;width:4rem&#39;  alt="">
                            <p>身份证正面照</p>
                        </p>
                        <img  style=&#39;width: 100%&#39; id=&#39;face-result&#39;/ alt="html+css+js で写真のプレビューとアップロード画像機能の共有を実装" >
                    </p>
                    <p class="container" style=&#39;margin-top:0.5rem;&#39;>
                        <input type="file" id=&#39;id-back&#39; name=&#39;back&#39; accept="image/*" />
                        <p id=&#39;back-empty-result&#39;>
                            <img src="/static/imghwm/default1.png"  data-src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true"  class="lazy"  style=&#39;width:4rem&#39;  alt="">
                            <p>身份证反面照</p>
                        </p>
                        <img  style=&#39;width: 100%&#39; id=&#39;back-result&#39;/ alt="html+css+js で写真のプレビューとアップロード画像機能の共有を実装" >
                    </p>
                </p>
            </p>
            <p class="btn">
                提交
            </p>
         </form>
    </body>
</html>

body{
    margin: 0
}
.content{
    padding:0.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #999 solid
}
.label{
    width:5rem;
}
.img-area{
    flex:1
}
.container{
    background-color:#e7e7e7;
    position: relative;
}
.container p{
    text-align: center;
    padding:0.5rem 0
}
.container input{
    opacity:0;
    filter:alpha(opacity=0);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.container p{
    font-size: 0.9rem;
    color:#999
}
.btn{
    background-color: #4363ab;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    width:80%;
    border-radius: 0.2rem;
    margin: 2rem auto;
    font-weight: 600;
    font-size: 1.2rem
}

関連する推奨事項:

ページを更新せずに JavaScript を使用して画像をプレビューおよびアップロードする方法のチュートリアル

JavaScript のプレビューと画像のアップロードで見つかった問題の解決策_画像の特殊効果

jQuery を実装するローカルプレビューと画像アップロード関数 _jquery

以上がhtml+css+js で写真のプレビューとアップロード画像機能の共有を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Webコンポーネントのスタイリングオプションを検討しますApr 12, 2025 am 10:02 AM

Webコンポーネントのスタイルをどこに入れますか？

Asyncを理解するのが待っていますApr 12, 2025 am 09:55 AM

Webのコードを書くとき、最終的には、完了するまでに少し時間がかかる可能性のあるプロセスを実行する必要があります。 JavaScriptは本当にマルチタスクをすることができます

最高のサードパーティのコンポーネントApr 12, 2025 am 09:54 AM

私は、Webのコンポーネント化のファンです。私はそれがほぼすべてのスケールでウェブサイトを構築するための非常に良い方法だと思います（おそらく、おそらく最も絶対的なものを除いて

CSSプロパティはいくつありますか？Apr 12, 2025 am 09:53 AM

Tomasz wakomyは、すべてのCSS属性に名前を付けることについてのジョークツイートを投稿し、Tejas KumarはNPMモジュールを作成する冗談の答えで答えました。あなた

GreensockでWebでアニメーション化する方法Apr 12, 2025 am 09:48 AM

ウェブ上でアニメーション化する方法は本当に何千もあります。ここでは、さまざまなアニメーションテクノロジーの比較について説明しました。今日、私たちは行くつもりです

CSSでMax-Font-Sizeをどのように行いますか？Apr 12, 2025 am 09:45 AM

CSSは最大サイズのサイズを持っていないので、それらの線に沿って何かをする何かが必要な場合は、トリッキーになる必要があります。

1つの価格で4つのレイアウトApr 12, 2025 am 09:40 AM

Flexboxレイアウトに関するツイートがTwitterで8Kのいいね！を取得すると、かなり注目に値します！

「使用」要素を使用した自動SVG圧縮を超えて進みますApr 12, 2025 am 09:39 AM

独自のSVGファイルを描画する場合、またはインターネットからダウンロードした場合、このSVG-EditorやSVGOMGのようなツールは友達です。でファイルを圧縮します

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。