当前位置：Gxlcms > css > html+css+js实现拍照预览上传图片功能实例分享

html+css+js实现拍照预览上传图片功能实例分享

时间：2021-07-01 10:21:17 帮助过：81人阅读

我们在做网页时经常会需要有上传图片的需求，可能是选择图片或者拍照上传，如果简单的使用

<input type="file"/>

这种方式虽然也能实现功能，但用户体验上可能会差了一些，所以本文记录了使用css+js实现图片选中后的预览及压缩上传功能，部分带来来源于网络，此处做了记录整理。

效果预览：

1.创建index.html

<!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='text/javascript' src='index.js' charset='utf-8'></script>
    </head>
    <body>
         <form id="mainForm">
            <p class="content">
                <p class="label">身份证</p>
                <p class="img-area">
                    <p class="container">
                        <input type="file" id='id-face' name='face'  accept="image/*" />
                        <p id='face-empty-result'>
                            <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身份证正面照</p>
                        </p>
                        <img style='width: 100%' id='face-result'/>
                    </p>
                    <p class="container" style='margin-top:0.5rem;'>
                        <input type="file" id='id-back' name='back' accept="image/*" />
                        <p id='back-empty-result'>
                            <img style='width:4rem' src="https://github.com/wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt="">
                            <p>身份证反面照</p>
                        </p>
                        <img style='width: 100%' id='back-result'/>
                    </p>
                </p>
            </p>
            <p class="btn">
                提交
            </p>
         </form>
    </body>
</html>

2.创建index.css

3.创建index.js

html+css+js实现拍照预览上传图片功能实例分享

人气教程排行