JavaScript头像上传插件源码分享

/* 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 */ 
/* 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元素全部加载完成，执行此方法 
 

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);//最后添加整个页面无法选中事件 
}; 

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程序设计有所帮助。