您的位置：首页 > Web前端 > JavaScript

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

2017-08-11 17:41 627 查看

完整案例下载地址：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);

?>

实现效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js图片上传进度条图片上传进度条

相关文章推荐

新的分享

章节导航