js上传实现进度圆圈以及图片预览

最新推荐文章于 2020-03-22 15:56:34 发布

原创

最新推荐文章于 2020-03-22 15:56:34 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #js

这篇博客介绍了如何在上传身份证照片时实现进度效果和上传后的图片预览。通过引入jquery.form.js插件，利用ajaxSubmit配合uploadProgress方法更新上传进度，并在上传成功后利用canvas展示进度圆圈。同时提供了完整的案例下载链接。

过去项目的需求：
1、上传身份证照片时显示上传时的进度效果；
2、上传结束后预览照片；

先附上图：

这里写图片描述

完整案例下载地址：http://download.youkuaiyun.com/download/webtoy/9970435

思路：
1、引入jquery.form.js插件；
2、ajaxSubmit上传以及canvas画圈，在ajaxSubmit的uploadProgress方法中传参关联上传进度，上传成功后设置照片路径。

html代码如下：

    <div class='uploadWrap'>
        <div class="uploadIDcard">
            <div class="upload_box">
                <ul>
                    <li id='li_idCard'>
                        <span class="percent" id="percent1">+</span>
                        <canvas class="process" id="process1">0%</canvas>
                        <input type="file" id="IDCardFront" name="IDCardFront">
                        <img id='img' src="">
                    </li>
                </ul>
            </div>
        </div>
    </div>