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 =

'

' +

'' +

'' +

'' +

'

' +

'' +

'

' +

'

';

$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.οnlοad=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代码：

$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代码：

new UploadImg({

el:".couser-img-upload",

url:'./upload.php',

Max_Width:280,

Max_Height:160

});

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