javascript代码：
上传控件不支持您的浏览器！";
// 构造函数
function UploadImg(option) {
$u = this;
$u.option = option;
$u.init($u.option);
}
UploadImg.prototype = {
//初始化
init: function() {
var $u = this;
//template
$u.addupLoader =
' ' +
'![]()
' +
'' +
'
' +
'' +
'
';
$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,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;">
$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代码：
HTML代码：
<Meta charset="UTF-8">