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

最新推荐文章于 2024-07-22 16:55:42 发布

答题小程序制作

最新推荐文章于 2024-07-22 16:55:42 发布

阅读量2.1k

点赞数 2

分类专栏：详解案例 js php 文章标签： js图片上传进度条图片上传进度条

本文链接：https://blog.csdn.net/kesixin/article/details/77101475

版权

php 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

详解

8 篇文章 0 订阅

订阅专栏

完整案例下载地址：http://download.csdn.net/download/kesixin/9929881

最近在做图片上传的时候，上网找了比较久还没有现成的，因此自己做了一个，实现的功能如下：

1.去除默认的样式；

2.使用上传可以查看上传进度(本博做的是上传的百分比，做成进度圆圈类似)；

3.图片从本地选择上传后预览图片；

首先是去除浏览器默认上传图片框，通过设置css样式可以简单的修改成想要的效果。

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            text-align: center;
        }
        .uploadWrap{
            margin: auto;
            width: 500px;
            height: 500px;
        }
        #li_idCard{
                width: 210px;
                height: 120px;
                background: #b3dde2;
                color: #fff;
                text-align: center;
                line-height: 120px;
                font-size: 30px;
                border: 1px solid #999;
                position: relative;
                }
        #IDCardFront{
                width: 210px;
                height: 120px;
                opacity: 0;
                position: absolute;
                right: 0;
                top: 0;
                cursor: pointer;
                }
        .process {
            width: 280px;
            height: 140px;
            position: absolute;
            top: 30%;
            left: 40%;
            display: none;
        }
        #img{
            margin: 0 auto;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <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>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
</html>

这里html代码引入外部js文件。

js代码

<script>

    //进度条渲染效果
function drawProcess(id) {
    var text = $("#" + id).text();
    var process = text.substring(0, text.length - 1);
    var canvas = $("#" + id);
    var context = canvas[0].getContext('2d');
    context.clearRect(0, 0, 48, 48);
    context.beginPath();
    context.moveTo(240, 240);
    context.arc(24, 24, 24, 0, Math.PI * 2, false);
    context.closePath();
    context.fillStyle = '#fff';
    context.fill();
    context.beginPath();
    context.moveTo(24, 24);
    context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
    context.closePath();
    context.fillStyle = 'rgb(234,117,96)';  //圈的百分比
    context.fill();
    context.beginPath();
    context.moveTo(24, 24);
    context.arc(24, 24, 21, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = 'rgba(255,255,255,1)';
    context.fill();
    context.beginPath();
    context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
    context.closePath();
    context.strokeStyle = '#ddd';
    context.stroke();
    context.font = "bold 9pt Arial";
    context.fillStyle = 'rgb(234,117,96)';  //百分比数字颜色
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.moveTo(24, 24);
    context.fillText(text, 24, 24);
}

$("#IDCardFront").change(function () {

    if ($("#FrontUpload").length > 0) {

    } else {
        $("#li_idCard").wrap("<form id='FrontUpload' action='upload.php' method='post' enctype='multipart/form-data'></form>");
    }

    $("#FrontUpload").ajaxSubmit({

        dataType: 'json',
        beforeSend: function () {

        },
        uploadProgress: function (event, position, total, percentComplete) {
            $('#percent1').hide();
            $('#process1').show();
            $('#process1').text(percentComplete + "%");
            drawProcess('process1');
        },
        success: function (data) {
            if (data.result == 'true') {
                $('#img').attr('src','./'+data.img+'');
            } else {
                alert('上传失败');
            }
        }
    });
});
</script>

服务器端用的是PHP

upload.php代码：

<?php

error_reporting(0);//禁用错误报告

if (file_exists("./" . $_FILES["IDCardFront"]["name"])){
        $arrRet=array(
            'result'=>'false'
        );
}else{
        $ret=move_uploaded_file($_FILES["IDCardFront"]["tmp_name"],"./" . $_FILES["IDCardFront"]["name"]);
        if($ret){
              $arrRet=array(
                'result'=>'true',
                'img'=> $_FILES["IDCardFront"]["name"]
                );
        }else{
            $arrRet=array(
                'result'=>'false'
            );
        }
}

echo json_encode($arrRet);

?>