本文实例为大家分享了JavaScript头像上传插件源码，供大家参考，具体内容如下
效果图：
源码：
cxc.js
/* cxc.js 频繁操作公共接口 */
var $ = function (id) {
return document.getElementById(id);
}; //通过id获取dom对象
var A = function (msg) {
alert(msg);
}; //alert的简写
var EmptyFun = function () {
}; // 空方法
var setL = function (dom, L) {
dom.style.left = L + "px";
}; // 设置 dom 的 left
var setT = function (dom, T) {
dom.style.top = T + "px";
}; // 设置 dom 的 top
var setLT = function (dom, L, T) {
dom.style.left = L + "px";
dom.style.top = T + "px";
}; //同时设置 dom 的 left top
var getLT = function (dom) {
return [parseInt(dom.style.left), parseInt(dom.style.top)];
}; // 返回dom的left和top值，类型为整型数组[int,int]
var setW = function (W) {
dom.style.width = W + "px";
}; // 设置 dom 的 width
var setH = function (H) {
dom.style.height = H + "px";
}; // 设置 dom 的 height
var setWH = function (dom, W, H) {
dom.style.width = W + "px";
dom.style.height = H + "px";
}; //同时设置 dom 的 width height
var getWH = function (dom) {
return [parseInt(dom.style.width), parseInt(dom.style.height)];
}; // 返回dom的 width 和 height 值，类型为整型数组[int,int]
var setLTWH = function (dom, L, T, W, H) {
dom.style.left = L + "px";
dom.style.top = T + "px";
dom.style.width = W + "px";
dom.style.height = H + "px";
}; //同时设置 dom 的 left top width height
var getLTWH = function (dom) {
return [parseInt(dom.style.left), parseInt(dom.style.top), parseInt(dom.style.width), parseInt(dom.style.height)]
}; // 返回dom的 left top width height 值，类型为整型数组[int,int,int,int]
var setcursor = function (dom,shape) {
dom.style.cursor = shape;
}; //设置鼠标经过dom的指针形状
var EventsType = ["click", "mousedown", "mouseup", "mouseover", "mouseleave", "mousemove"];//事件类型
var AddEvent = function (dom, type, fun) {
dom.addEventListener(type, fun, false);
}; //添加dom对象的事件监听方法
var AddEvent2 = function (dom, type1, fun1, type2, fun2) {
dom.addEventListener(type1, fun1, false);
dom.addEventListener(type2, fun2, false);
}; //一次添加dom的两个事件监听方法
var AddEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {
dom.addEventListener(type1, fun1, false);
dom.addEventListener(type2, fun2, false);
dom.addEventListener(type3, fun3, false);
}; //一次添加dom的三个事件监听方法
var DelEvent = function (dom, type, fun) {
dom.removeEventListener(type, fun, false);
}; // 删除dom对象的事件监听方法
var DelEvent2 = function (dom, type1, fun1, type2, fun2) {
dom.removeEventListener(type1, fun1, false);
dom.removeEventListener(type2, fun2, false);
}; //一次删除dom对象的两个事件监听方法
var DelEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {
dom.removeEventListener(type1, fun1, false);
dom.removeEventListener(type2, fun2, false);
dom.removeEventListener(type3, fun3, false);
}; //一次删除dom对象的三个事件监听方法
var inArray = function (str, arr) {
for (var i = 0; i < arr.length; i++) {
if (str == arr[i]) {
return true;
}
}
return false;
}; // 判断字符串str是否存在于数组arr
var cannotselect = function () {
window.getSelection().removeAllRanges();
}; //页面元素（文字、图片等）不能被选中
var setStyle = function (dom, styleName, styleValue) {
dom.setAttribute("style", styleName + ":" + styleValue + ";");
}; //设置dom的 一个style 属性值
var setStyle2 = function (dom, styleName1, styleValue1, styleName2, styleValue2) {
dom.setAttribute("style", styleName1 + ":" + styleValue1 + ";" + styleName2 + ":" + styleValue2 + ";");
};//一次设置dom的 两个style 属性值
var delStyle = function (dom, styleName) {
dom.removeAttribute("style", styleName);
};//删除dom的 一个style 属性值
var delStyle2 = function (dom, styleName1, styleName2) {
dom.removeAttribute("style", styleName1);
dom.removeAttribute("style", styleName2);
};//一次删除dom的 两个style 属性值
var setAttr = function (dom, attrName, attrValue) {
dom.setAttribute(attrName, attrValue);
};// 设置dom的 一个属性值
var setAttr2 = function (dom, attrName1, attrValue1, attrName2, attrValue2) {
dom.setAttribute(attrName1, attrValue1);
dom.setAttribute(attrName2, attrValue2);
};//一次设置dom的 两个属性值
var delAttr = function (dom, attrName) {
dom.removeAttribute(attrName);
};//删除dom的 一个属性值
var delAttr2 = function (dom, attrName1, attrName2) {
dom.removeAttribute(attrName1);
dom.removeAttribute(attrName2);
};//删除dom 的两个属性值
var Click = function (dom) {
dom.click();
};// 点击dom
var Hide = function (dom) {
dom.style.display = "none";
};// 隐藏dom
var Show = function (dom) {
dom.style.display = "inline";
}; // 显示dom
/* cxc.js 频繁操作公共接口 */
/* AJAX 接口 */
var url, method, msg;
var xmlReq = new XMLHttpRequest();
var AJAX = function (url, method, msg, callback) {
xmlReq.open(method, url, true);
xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlReq.onreadystatechange = function () {
if (xmlReq.readyState == 4) {
if (xmlReq.status == 200) {
callback();
}
else {
A("bad status is " + xmlReq.status);
}
}
};
xmlReq.send(msg);
};
/* AJAX 接口 */
one.js
/* one.js */
/* my website philosophy */
/*
注：一般网站，浏览器最大化时，没有横向滚动条，有纵向滚动条，页面缩放按比例只在合适的地方用到
<html>标签 不必加css和js控制 <body>标签 作为总父标签 用它控制整个页面的宽度和高度
<body>的宽度 一般为100%(考虑滚动条存在与否) 而高度可根据页面需求自定义
也就是说body的宽高就是页面的宽高 页面高度如果超出 浏览器窗口高度 出现滚动条
*/
var one = {
screenW: null, //可用浏览器窗口的宽度
screenH: null, //可用浏览器窗口的高度
body: null, //document.body对象
bodyW: null, //body的宽度
bodyH: null, //body的高度
avatar: null, //默认头像div
avatar_img:null,
main: null, //处理上传图片的主要父div
mainW: 430, //main的宽度
mainH:400, //main的高度
mainL: null, //main 的left位置
mainT:null, //main 的top位置
top: null,
upfile:null,
center:null,
bigimg: null,
movebox: null,
moveimg: null,
d11: null,
d22: null,
d33: null,
TopLeft: null,
TopRight: null,
BottomRight: null,
BottomLeft: null,
p2: null,
p3:null
};
var Init = function () {
//////////////////////////////////////////////////////////////////
one.screenW = window.innerWidth;
one.screenH = window.innerHeight;
one.body = document.body;
one.bodyW = one.body.offsetWidth;
one.bodyH = one.screenH; //定义body的高度等于可用浏览器窗口的高度
one.body.setAttribute("style", "height:" + one.bodyH + "px;");
//////////////////////////////////////////////////////////////////
one.avatar = $("avatar");
one.avatar_img = $("avatar_img");
one.main = $("main");
one.mainL = (one.bodyW - one.mainW) / 2;
one.mainT = (one.screenH - one.mainH) / 2;
///////////////////////////////////////////////////////////
one.top = $("top");
one.center = $("center");
one.bigimg = $("bigimg");
one.movebox = $("movebox");
one.moveimg = $("moveimg");
one.d11 = $("d11");
one.d22 = $("d22");
one.d33 = $("d33");
///////////////////////////////////////////////////////////
one.TopLeft = $("TopLeft");
one.TopRight = $("TopRight");
one.BottomRight = $("BottomRight");
one.BottomLeft = $("BottomLeft");
///////////////////////////////////////////////////////////
one.p2 = $("p2");
one.p3 = $("p3");
///////////////////////////////////////////////////////////
setLT(one.main, one.mainL, one.mainT);
Hide(one.main);
};
var End = function () {
};
window.onload = function () {
Init(); //初始化，获取页面上所有需要处理的标签对象，并赋初始值
Events(); //定义页面中的所有事件
End(); //js文件加载完成之后的处理工作
};//dom元素全部加载完成，执行此方法
Events.js
var downX, downY, oldL, oldT, tempWH, tempL, tempT, dxMax,tempMaxL,tempMaxT;
var file, imgtype, imgsize, imgW, imgH, imgP, imgURL;
var bigimgL, bigimgT;
var moveboxWH, moveboxL, moveboxT, moveboxMinL, moveboxMinT, moveboxMaxL, moveboxMaxT;
var moveimgL, moveimgT;
var topL, topT;
var gen = {
_moveboxWH:null,
_moveboxL: null,
_moveboxT: null,
};
/* one.avatar Events start */
var avatar_click = function () {
one.upfile = document.createElement("input");
setAttr2(one.upfile, "type", "file", "id", "upfile");
this.parentNode.appendChild(one.upfile);
Click(one.upfile);
one.upfile.onchange = function () {
file = this.files[0];
imgtype = file.type;
if (!fun.check_imgtype()) {
return;
} //检查文件类型
imgsize = file.size;
if (!fun.check_imgsize()) {
return;
}; //检查图片大小
var reader = new FileReader();
reader.onload = function () {
fun.setImgWH(this.result, imgtype);
delete (reader);
};
reader.readAsDataURL(file);
///////////////////////////
this.parentNode.removeChild(one.upfile);
};
};
var avatar_mouseover = function () {
setStyle2(one.avatar, "border", "2px solid #46AFDC", "box-shadow", "0 0 5px #46AFDC");
};
var avatar_mouseleave = function () {
delStyle2(one.avatar, "border", "box-shadow");
};
/* one.avatar Events end */
/* one.top Events start */
var topLimit = function () {
if (topL < 0)
topL = 1;
else if (topL > one.bodyW - 432)
topL = one.bodyW - 432 - 1;
if (topT < 0)
topT = 1;
else if (topT > one.screenH - 402)
topT = one.screenH - 402 - 1;
};
var top_mousedown = function (e) {
if (e.button > 0) {
top_mouseup();
return false;
}
downX = e.clientX;
downY = e.clientY;
oldL = one.main.offsetLeft;
oldT = one.main.offsetTop;
AddEvent2(document, EventsType[2], top_mouseup, EventsType[5], doc_top_mousemove);
};
var doc_top_mousemove = function (e) {
topL = oldL + e.clientX - downX;
topT = oldT + e.clientY - downY;
topLimit();
setLT(one.main, topL, topT);
};
var top_mouseup = function () {
DelEvent2(document, EventsType[2], top_mouseup, EventsType[5], doc_top_mousemove);
};
/* one.top Events end */
/* one.movebox Events start */
var moveboxLimit = function () {
if (moveboxL <= moveboxMinL)
moveboxL = moveboxMinL;
else if (moveboxL >= moveboxMaxL)
moveboxL = moveboxMaxL;
if (moveboxT <= moveboxMinT)
moveboxT = moveboxMinT;
else if (moveboxT > moveboxMaxT)
moveboxT = moveboxMaxT;
};
var movebox_mousedown = function (e) {
if (e.button > 0) {
movebox_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveboxL;
oldT = moveboxT;
AddEvent2(document, EventsType[2], movebox_mouseup, EventsType[5], doc_movebox_mousemove);
};
var doc_movebox_mousemove = function (e) {
moveboxL = oldL + e.clientX - downX;
moveboxT = oldT + e.clientY - downY;
moveboxLimit();
setLT(one.movebox, moveboxL, moveboxT);
fun.setimg();
fun.set_dxx();
};
var movebox_mouseup = function () {
DelEvent2(document, EventsType[2], movebox_mouseup, EventsType[5], doc_movebox_mousemove);
};
/* one.movebox Events end */
/* 拉伸事件开始 */
var TopLeft_mousedown = function (e) {
if (e.button > 0) {
TopLeft_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = moveboxL;
oldT = moveboxL;
tempWH = moveboxWH;
tempL = moveboxL - bigimgL;
tempT = moveboxT - bigimgT;
tempMaxL = moveboxMaxL;
tempMaxT = moveboxMaxT;
dxMax = tempL >= tempT "../saveimg/"+txt;
Hide(one.main);
Show(one.avatar);
};
var create_msg = function () {
var msg = "moveboxL=" + (moveboxL - bigimgL) + "&moveboxT=" + (moveboxT - bigimgT) + "&moveboxWH=" + moveboxWH;
msg += "&imgURL=" + imgURL;
return msg;
};
var p2_click = function () {
url="../Avatar/AJAX_saveimg";
method = "post";
msg = create_msg();
AJAX(url, method, msg, callback);
};
var p3_click = function () {
Hide(one.main);
Show(one.avatar);
};
/* 两个按钮事件结束 */
var Events = function () {
AddEvent3(one.avatar, EventsType[0], avatar_click, EventsType[3], avatar_mouseover, EventsType[4], avatar_mouseleave);//avatar
AddEvent(one.top, EventsType[1], top_mousedown);//top
AddEvent(one.movebox, EventsType[1], movebox_mousedown);//movebox
AddEvent(one.TopLeft, EventsType[1], TopLeft_mousedown);//TopLeft
AddEvent(one.TopRight, EventsType[1], TopRight_mousedown);//TopRight
AddEvent(one.BottomRight, EventsType[1], BottomRight_mousedown);//BottomRight
AddEvent(one.BottomLeft, EventsType[1], BottomLeft_mousedown);//BottomLeft
AddEvent(one.p2, EventsType[0], p2_click);//p2
AddEvent(one.p3, EventsType[0], p3_click);//p3
/* =========================================== END =========================================== */
AddEvent(document, EventsType[5], cannotselect);//最后添加整个页面无法选中事件
};
def.js
var pic = {
pwh_max: 299, //图片最大宽高
pwh_min: 30, //图片最小宽高
P:10/1, //图片宽高比
movediv_min: 30, //截框最小宽高
movediv_default: 100,//截框初始宽高
W_H: false, //宽大于高？
imgtype: ["image/jpeg", "image/png", "image/gif", "image/bmp"],//支持这4种类型图片
imgsize: 5 * 1024 * 1024, //最大5M
d11WH: 119,
d22WH: 99,
d33WH: 71,
URL:window.URL || window.webkitURL || window.mozURL || window.msURL || false,
};
var fun = {
FormBlob: function (dataURI) {
var byteString, splits = false, splits1 = dataURI.replace(new RegExp("^data:.*base64,"), function () {
splits = true;
return "";
});
byteString = atob(splits1);
var byteStringlength = byteString.length, ia = new Uint8Array(byteStringlength);
for (var i = 0; i < byteStringlength; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: imgtype
});
},
check_imgtype: function () {
if (!inArray(imgtype, pic.imgtype)) {
one.upfile.parentNode.removeChild(one.upfile);
alert("请选择正确的图片类型");
return false;
} else { return true;}
},
check_imgsize: function () {
if (imgsize > pic.imgsize) {
this.parentNode.removeChild(this);
alert("图片不能超过5M");
return false;
} else { return true;}
},
setImgWH: function (src,type) {
var image = new Image();
image.onload = function () {
var newcanvas = document.createElement("canvas");
newcanvas.style.display = "none";
var bodys = document.body;
bodys.appendChild(newcanvas);
var ctx = newcanvas.getContext("2d");
var width = this.width, height = this.height;//图片的宽高
var w, h; //选取图片的宽高
var cw, ch;//画布的宽高
var P = width / height;
imgP = P;
pic.W_H = width > height "#FFFFFF";
ctx.fillRect(0, 0, cw, ch);
ctx.drawImage(image, 0, 0, w, h, 0, 0,cw, ch);
imgURL = newcanvas.toDataURL(type, 1);
//imgURL = pic.URL.createObjectURL(fun.FormBlob(imgURL));
one.d11.src = one.d22.src = one.d33.src = one.bigimg.src = one.moveimg.src = imgURL;
ctx.clearRect(0, 0, cw, ch);
bodys.removeChild(newcanvas);
delete DATA;
delete image;
fun.setStart();
};
image.onerror = function () {
alert("图片已损坏，请上传正确图片");
};
image.src = src;
},
setStart: function () {
Hide(one.avatar);
Show(one.main);
fun.set_bigimg();
fun.set_movebox();
fun.set_dxx();
},
set_bigimg: function () {
bigimgL = Math.round((pic.pwh_max - imgW) / 2);
bigimgT = Math.round((pic.pwh_max - imgH) / 2);
setLT(one.bigimg,bigimgL,bigimgT);
},
set_movebox: function () {
if (pic.W_H) {
moveboxWH = imgH <= pic.movediv_default "htmlcode">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="/UploadFiles/2021-04-02/one.js">
Avatar_Main.css
body {
margin:0px;
padding:0px;
background-color:#9C938F;
}
#avatar{
width:120px;
height:120px;
border:2px solid #FFFFFF;
position:absolute;
top:30px;
left:8%;
border-radius:7px;
background-color:#ffffff;
overflow:hidden;
cursor:pointer;
}
#avatar_img{
width:120px;
height:120px;
}
#upfile{
display:none;
}
#main{
position:absolute;
width:430px;
height:400px;
background-color:#9C938F;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #635E5B;
border-top:1px solid #635E5B;
border-radius:8px;
}
#top,#center,#d1,#d2,#d3,#bottom{
position:absolute;
border-bottom:1px solid #635E5B;
border-right:1px solid #635E5B;
border-left:1px solid #fff;
border-top:1px solid #fff;
background-color:#9C938F;
border-radius:8px;
}
#top{
width:424px;
height:43px;
left:2px;
top:2px;
text-align: center;
cursor:move;
}
#p1{
position:absolute;
left:115px;
top:-30px;
font-size:30px;
font-family:"微软雅黑";
color: #9C938F;
font-weight:normal;
text-shadow: -1px -1px white, 1.2px 1.2px #333333;
}
#center{
width:300px;
height:300px;
top:49px;
left:2px;
overflow:hidden;
border-radius:0px;
}
#d1{
overflow:hidden;
width:120px;
height:120px;
top:49px;
right:2px;
border-radius:0px;
}
#d2{
overflow:hidden;
width:100px;
height:100px;
top:173px;
right:2px;
border-radius:0px;
}
#d3{
overflow:hidden;
width:72px;
height:72px;
top:277px;
right:2px;
border-radius:0px;
}
#bottom{
width:424px;
height:43px;
left:2px;
bottom:2px;
}
#p2,#p3{
position:absolute;
width:100px;
height:30px;
font-size:22px;
font-family:"微软雅黑";
color: #9C938F;
font-weight:normal;
text-shadow: -1px -1px white, 1.2px 1.2px #333333;
}
#p2:hover,#p3:hover{
cursor:pointer;
color:#bbbbbb;
}
#p2{
top:-15px;
left:200px;
}
#p3{
top:-15px;
right:10px;
}
#bigimg{
position:absolute;
}
#black{
position:absolute;
z-index:99;
width:299px;
height:299px;
background-color:#000;
opacity:0.6;
}
#movebox {
position: absolute;
z-index: 100;
overflow: hidden;
cursor:move;
}
#BottomRight,#TopRight,#TopLeft,#BottomLeft {
background:#D6FB66;
display:block;
width:6px;
height:6px;
overflow:hidden;
position:absolute;
z-index:105;
bottom:0;
right:0;
cursor:nw-resize;
}
#BottomLeft {
bottom:0;
left:0;
cursor:ne-resize;
}
#TopRight {
top:0;
right:0;
cursor:ne-resize;
}
#TopLeft {
top:0;
left:0;
cursor:nw-resize;
}
#moveimg{
position:absolute;
}
#d11,#d22,#d33{
position:absolute;
}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JavaScript头像上传插件源码分享”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。