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

小云云
リリース: 2018-01-16 16:41:45
オリジナル
3624 人が閲覧しました

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 style=&#39;width:4rem&#39; src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身份证正面照</p>
                        </p>
                        <img style=&#39;width: 100%&#39; id=&#39;face-result&#39;/>
                    </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 style=&#39;width:4rem&#39; src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身份证反面照</p>
                        </p>
                        <img style=&#39;width: 100%&#39; id=&#39;back-result&#39;/>
                    </p>
                </p>
            </p>
            <p class="btn">
                提交
            </p>
         </form>
    </body>
</html>
ログイン後にコピー


js

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート