原生javascript上传图片带进度条【实例分享】

javascript代码：

;
(function(w) {
var error = "上传控件不支持您的浏览器！";
// 构造函数
function UploadImg(option) {
$u = this;
$u.option = option;
$u.init($u.option);
}
UploadImg.prototype = {
//初始化
init: function() {
var $u = this;
//template
$u.addupLoader =
'<form enctype="multipart/form-data">' +
'<label style="display:block;width:100%;cursor:pointer;height:100%;position: absolute;">' +
'<input class="kechenFengMian" type="file" capture="camera" name="file"/>' +
'</label>' +
'</form> ' +
'<img src="" width="280" height="160" />' +
'<div class="upload-progress"><span class="upload-son">等待中……</span></div>' +
'<div class="mask-Div">' +
'<div class="mask-show"></div>' +
'<div class="button-div">' +
'<span class="upload-btn"></span>' +
'<span class="deleteImg-btn"></span></div>' +
'</div>';
$u.wrap = $($u.option.el);
$u._creatFrom();
$u.eventChange($u.wrap.childNodes);
},
//生成form模板
_creatFrom: function() {
this.wrap.innerHTML = $u.addupLoader;
},
_removeFrom: function() {
this.wrap.innerHTML = "";
},
//事件触发
/*
*对于onchange事件若值没有发生改变的话
*此事件就会失效所以在这里打算将DOM移除
*直接初始化所有方法和事件
*
*/
/**
*@method (eventChange)
*@param {childArr} 参数为数组集合
*/
eventChange: function(childArr) {
var $u = this;
//提交form表单
addEvent(childArr[0], 'change', function(e) {
//保存当前this对象
var thisForm = this;
if (!thisForm['file'].files.length == 0) {
$u._removeFrom();
$u.init();
testWidthHeight(e,function(iSsize){
if(!iSsize){
alert("上传的尺寸为:长为"+$u.option.Max_Width +"宽为"+$u.option.Max_Height);
return false;
}
childArr[2].setAttribute('src', "");
childArr[3].style.display = 'block';
$u.wrap.style.background = "#f3f3f3";
//发送post请求
$u.ajaxPost(thisForm, $u.option.url, function(result) {
//post成功
var data = JSON.parse(result);
$u.maskEvent(childArr);
childArr[2].setAttribute('src', data.url);
childArr[3].style.display = 'none';
}, function(error) {
//post 失败
console.log(error);
}, childArr);
});
} else {
alert("上传个数不能为0");
return false;
}
});
/**
*@method (testWidthHeight) 获取上传尺寸大小
*@param {e} 事件对象
*@param {callback} 回调函数
*/
function testWidthHeight(e,callback) {
var isSize;
var forms = e.target;
var reader = new FileReader();
reader.onload = function () {
var dataURL = reader.result;
var image = new Image();
image.onload=function(){
var width = image.width;
var height = image.height;
isSize = width <= $u.option.Max_Width && height <= $u.option.Max_Height;
if(typeof callback == 'function') {
callback(isSize);
}
};
image.src = dataURL;
};
reader.readAsDataURL(forms.files[0]);
return isSize;
}
},
//遮罩层上的是事件
maskEvent: function(childArr) {
$u = this;
var addBtn = childArr[4].childNodes[1].childNodes[0];
var deleBtn = childArr[4].childNodes[1].childNodes[1];
//当鼠标滑过
addEvent($u.wrap, "mouseover", function() {
if (childArr[2].getAttribute('src')) {
childArr[4].style.top = 0;
}
});
//当鼠标离开
addEvent($u.wrap, "mouseout", function() {
childArr[4].style.top = -300 + 'px';
});
//修改
addEvent(addBtn, 'click', function() {
childArr[0][0].click();
});
//删除
addEvent(deleBtn, 'click', function() {
$u.wrap.style.backgroundImage = "url(add-bg-upload1.jpg)";
childArr[2].setAttribute('src', "");
});
},
/**
*@method (ajaxPost) 上传方法
*@param {fm} 当前form表单
*@param {url} url地址
*@param {fnSuc} 成功回调
*@param {fnErr} 失败回调
*@param {childArr} 节点集合
*/
ajaxPost: function(fm, url, fnSuc, fnErr, childArr) {
var $u = this;
//进度条
var proGress = childArr[3].childNodes[0];
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//data数据
var data = new FormData(fm);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
//成功回调
if (xhr.status == 200) {
fnSuc(xhr.responseText);
} else {
if (fnErr) {
fnErr(xhr.status);
}
}
}
};
//监听上传进度
addEvent(xhr.upload, "progress", uploadProgress);
//post后台
xhr.open('post', url);
//发送数据
xhr.send(data);
//上传进度
function uploadProgress(evt) {
var loaded = evt.loaded; //已上传的文件大小
var allTotal = evt.total; //总大小
var per = Math.floor((loaded / allTotal) * 100) + '%';
proGress.innerHTML = per;
proGress.style.width = per;
}
},
};
//获取元素
function $(selectors) {
return document.querySelector(selectors);
}
//事件监听
function addEvent(el, type, fn) {
if (el.addEventListener) {
el.addEventListener(type, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + type, function() {
fn.call(el);
});
} else {
throw new Error('not supported or DOM not loaded');
}
}
//判断浏览器是否存在file属性
if (window.File && window.FileList) {
window.UploadImg = UploadImg;
} else {
alert(error);
return false;
}
})(window);

PHP代码：

<?php
$file=$_FILES['file'];
foreach ($file as $key => $value) {
$$key=$value;
}
$path='upload/'.time().strtolower(strstr($name, '.')); //修改上传文件的名称,strstr($name, '.')是获取后缀名
move_uploaded_file($tmp_name,$path);
$path=strstr($path,$path[0]); //图片的存储地址
$arr=array(
"url"=>$path
);
$json=json_encode($arr); //json
echo $json;
?>

CSS代码：

.couser-img-upload {
width:280px;
height:160px;
cursor:pointer;
position: relative;
overflow: hidden;
background:url(add-bg-upload1.jpg);
}
.couser-img-upload:hover{
border: 2px solid #00caac;
background:url(add-bg-upload.jpg);
}
.kechenFengMian {
display:none;
}
.upload-progress{
display: none;
width: 90%;
position: absolute;
overflow: hidden;
border:1px solid #00caac;
border-radius: 8px;
top: 50%;
margin-top: -7.5px;
left: 50%;
padding: 2px;
margin-left:-46%;
font-size: 12px;
}
.upload-progress .upload-son{
display: inline-block;
background: #00caac;
border-radius: 8px;
text-align: center;
color: #fff;
}
.mask-Div{
position: absolute;
top: -300px;
width: 100%;
height: 100%;
}
.mask-Div .mask-show{
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
.mask-Div .button-div{
width: 140px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -70px;
margin-top: -25px;
}
.mask-Div .button-div span{
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background:url(tianjiashanchu.png) no-repeat;
}
.mask-Div .button-div span.upload-btn{
background-position: 0px 0px;
float: left;
}
.mask-Div .button-div span.deleteImg-btn{
background:url(tianjiashanchu.png) no-repeat;
background-position: -50px 0px ;
float: right;
}
.mask-Div .button-div span.upload-btn:hover{
background-position: 0px -50px ;
}
.mask-Div .button-div span.deleteImg-btn:hover{
background-position: -50px -50px ;
}

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="uploadImg.js"></script>
</head>
<body>
<div class="couser-img-upload"></div>
<script type="text/javascript">
new UploadImg({
el:".couser-img-upload",
url:'./upload.php',
Max_Width:280,
Max_Height:160
});
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• 利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
• PHP + plupload.js实现多图上传并显示进度条加删除实例代码
• JS插件plupload.js实现多图上传并显示进度条
• Node.js实现兼容IE789的文件上传进度条
• js HTML5 Ajax实现文件上传进度条功能
• PHP中使用Session配合Javascript实现文件上传进度条功能
• js实现带进度条提示的多视频上传功能