相思资源网 Design By www.200059.com
本文实例为大家分享了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程序设计有所帮助。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无JavaScript头像上传插件源码分享的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。