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

Javascript  

完整案例下载地址

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

1.去除”input file”默认的样式；

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

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

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

index.html代码如下;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         body{
  8.             text-align: center;
  9.         }
  10.         .uploadWrap{
  11.             margin: auto;
  12.             width: 500px;
  13.             height: 500px;
  14.         }
  15.         #li_idCard{
  16.                 width: 210px;
  17.                 height: 120px;
  18.                 background: #b3dde2;
  19.                 color: #fff;
  20.                 text-align: center;
  21.                 line-height: 120px;
  22.                 font-size: 30px;
  23.                 border: 1px solid #999;
  24.                 position: relative;
  25.                 }
  26.         #IDCardFront{
  27.                 width: 210px;
  28.                 height: 120px;
  29.                 opacity: 0;
  30.                 position: absolute;
  31.                 right: 0;
  32.                 top: 0;
  33.                 cursor: pointer;
  34.                 }
  35.         .process {
  36.             width: 280px;
  37.             height: 140px;
  38.             position: absolute;
  39.             top: 30%;
  40.             left: 40%;
  41.             display: none;
  42.         }
  43.         #img{
  44.             margin: 0 auto;
  45.             margin-top: 200px;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class='uploadWrap'>
  51.             <div class="uploadIDcard">
  52.                 <div class="upload_box">
  53.                     <ul>
  54.                         <li id='li_idCard'>
  55.                             <span class="percent" id="percent1">+</span>
  56.                             <canvas class="process" id="process1">0%</canvas>
  57.                             <input type="file" id="IDCardFront" name="IDCardFront">
  58.                             <img id='img' src="">
  59.                         </li>
  61.                     </ul>
  62.                 </div>
  63.             </div>
  65.         </div>
  66. </body>
  67. <script type="text/javascript" src="jquery.min.js"></script>
  68. <script type="text/javascript" src="jquery.form.js"></script>
  69. </html>

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

js代码

  1. <script>
  3.     //进度条渲染效果
  4. function drawProcess(id) {
  5.     var text = $("#" + id).text();
  6.     var process = text.substring(0, text.length - 1);
  7.     var canvas = $("#" + id);
  8.     var context = canvas[0].getContext('2d');
  9.     context.clearRect(0, 0, 48, 48);
  10.     context.beginPath();
  11.     context.moveTo(240, 240);
  12.     context.arc(24, 24, 24, 0, Math.PI * 2, false);
  13.     context.closePath();
  14.     context.fillStyle = '#fff';
  15.     context.fill();
  16.     context.beginPath();
  17.     context.moveTo(24, 24);
  18.     context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
  19.     context.closePath();
  20.     context.fillStyle = 'rgb(234,117,96)';  //圈的百分比
  21.     context.fill();
  22.     context.beginPath();
  23.     context.moveTo(24, 24);
  24.     context.arc(24, 24, 21, 0, Math.PI * 2, true);
  25.     context.closePath();
  26.     context.fillStyle = 'rgba(255,255,255,1)';
  27.     context.fill();
  28.     context.beginPath();
  29.     context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
  30.     context.closePath();
  31.     context.strokeStyle = '#ddd';
  32.     context.stroke();
  33.     context.font = "bold 9pt Arial";
  34.     context.fillStyle = 'rgb(234,117,96)';  //百分比数字颜色
  35.     context.textAlign = 'center';
  36.     context.textBaseline = 'middle';
  37.     context.moveTo(24, 24);
  38.     context.fillText(text, 24, 24);
  39. }
  41. $("#IDCardFront").change(function () {
  43.     if ($("#FrontUpload").length > 0) {
  45.     } else {
  46.         $("#li_idCard").wrap("<form id='FrontUpload' action='upload.php' method='post' enctype='multipart/form-data'></form>");
  47.     }
  49.     $("#FrontUpload").ajaxSubmit({
  51.         dataType: 'json',
  52.         beforeSend: function () {
  54.         },
  55.         uploadProgress: function (event, position, total, percentComplete) {
  56.             $('#percent1').hide();
  57.             $('#process1').show();
  58.             $('#process1').text(percentComplete + "%");
  59.             drawProcess('process1');
  60.         },
  61.         success: function (data) {
  62.             if (data.result == 'true') {
  63.                 $('#img').attr('src','./'+data.img+'');
  64.             } else {
  65.                 alert('上传失败');
  66.             }
  67.         }
  68.     });
  69. });
  70. </script>

服务器端用的是PHP

upload.php代码：

  1. <?php
  3. error_reporting(0);//禁用错误报告
  5. if (file_exists("./" . $_FILES["IDCardFront"]["name"])){
  6.         $arrRet=array(
  7.             'result'=>'false'
  8.         );
  9. }else{
  10.         $ret=move_uploaded_file($_FILES["IDCardFront"]["tmp_name"],"./" . $_FILES["IDCardFront"]["name"]);
  11.         if($ret){
  12.               $arrRet=array(
  13.                 'result'=>'true',
  14.                 'img'=> $_FILES["IDCardFront"]["name"]
  15.                 );
  16.         }else{
  17.             $arrRet=array(
  18.                 'result'=>'false'
  19.             );
  20.         }
  21. }
  23. echo json_encode($arrRet);
  25. ?>

实现效果：



评论 0

发表评论

点击排行

标签云

友情链接

Top