全屏js头像上传插件源码高清版.doc

资源描述

　　本文实例为大家分享了全屏js头像上传插件源码，供大家参考，具体内容如下　　index.html 　　<!DOCTYPE html>  　　<html>  　　<head>  　　  <meta name="viewport" content="width=device-width" />  　　  <title>ccp</title>  　　  <link href="Content/ccp.css" rel="stylesheet" />  　　  <script src="Scripts/cxc.js"></script>  　　  <script src="Scripts/ccp.js"></script>  　　  <script src="Scripts/fun.js"></script>  　　</head>  　　<body>  　　  <div id="SelectPicture">选择图片</div>  　　  <div id="pre">  　　    <div id="prea">  　　      <div id="ctna">  　　        <img id="imga"/>  　　      </div>  　　    </div>  　　    <div id="preb">  　　      <div id="ctnb">  　　        <img id="imgb"/>  　　      </div>  　　    </div>  　　    <div id="prec">  　　      <div id="ctnc">  　　        <img id="imgc"/>  　　      </div>  　　    </div>  　　  </div>  　　  <div id="ccp">  　　    <div id="ctn">  　　      <img id="fixed_img" />  　　      <div id="varied_div">  　　        <img id="varied_div_img" />  　　        <i id="TopLeft"></i>  　　        <i id="TopRight"></i>  　　        <i id="BottomRight"></i>  　　        <i id="BottomLeft"></i>  　　      </div>  　　    </div>  　　    <div id="black_cover"></div>  　　  </div>  　　  <div id="bt">  　　    <div id="Y_OUT">  　　      <div id="Y">Y</div>  　　    </div>  　　    <div id="N_OUT">  　　      <div id="N">N</div>  　　    </div>  　　  </div>  　　</body>  　　</html> 　　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 setRTWH = function (dom, R, T, W, H) {  　　  dom.style.right = R + "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:"click",  　　  mousedown:"mousedown",  　　  mouseup:"mouseup",  　　  mouseover:"mouseover",  　　  mouseleave:"mouseleave",  　　  mousemove:"mousemove",  　　  DOMContentLoaded:"DOMContentLoaded",  　　};  　　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 Hide = function (dom) {  　　  dom.style.display = "none";  　　};//  隐藏dom  　　var Hide3 = function (dom1,dom2,dom3) {  　　  dom1.style.display = "none";  　　  dom2.style.display = "none";  　　  dom3.style.display = "none";  　　};//  隐藏3个dom  　　var Show = function (dom) {  　　  dom.style.display = "inline";  　　}; // 显示dom  　　var Show3 = function (dom1, dom2, dom3) {  　　  dom1.style.display = "inline";  　　  dom2.style.display = "inline";  　　  dom3.style.display = "inline";  　　};//  显示3个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("ajax status is " + xmlReq.status);  　　      }  　　    }  　　  };  　　  xmlReq.send(msg);  　　};  　　/* AJAX 接口 */ 　　/* 入口 */ 　　var start = function (fun) {  　　  var begin = function () {  　　    DelEvent(document, EventsType.DOMContentLoaded, begin);  　　    fun();  　　  };  　　  AddEvent(document, EventsType.DOMContentLoaded, begin);  　　};  　　/* 入口 */ 　　/* 环境 */ 　　var screenW = window.innerWidth;  　　var screenH = window.innerHeight;  　　/* 环境 */ 　　ccp.js 　　var cfg = {  　　  imgtype: ["image/jpeg", "image/png", "image/gif", "image/bmp"],  　　  imgsize: 5 * 1024 * 1024,  　　  varied_divMIN: 50,  　　  varied_divDEFAULT: 100,  　　  needWH:0,  　　};  　　var dom = {  　　  body: null,  　　  SelectPicture: null,  　　  upfile: null,  　　  pre: null,  　　  ccp: null,  　　  bt: null,  　　  prea: null,  　　  preb: null,  　　  prec: null,  　　  ctna: null,  　　  ctnb: null,  　　  ctnc: null,  　　  imga: null,  　　  imgb: null,  　　  imgc: null,  　　  Y_OUT: null,  　　  N_OUT: null,  　　  Y: null,  　　  N: null,  　　  ctn: null,  　　  black_cover: null,  　　  fixed_img: null,  　　  varied_div: null,  　　  varied_div_img: null,  　　  TopLeft: null,  　　  TopRight: null,  　　  BottomRight: null,  　　  BottomLeft: null,  　　};  　　var ccp = {  　　  SelectPictureW: null,  　　  SelectPictureH: null,  　　  SelectPictureP1: 9,  　　  SelectPictureP2: 4,  　　  SelectPictureL: null,  　　  SelectPictureT: null,  　　  SelectPictureFontSize: null,  　　  ///////////////////////////  　　  file: null,  　　  imgtype: null,  　　  imgsize: null,  　　  ///////////////////////////  　　  imgW: null,  　　  imgH: null,  　　  imgN: null,  　　  imgURL: null,  　　  //////////////////////////  　　  preW: null,  　　  preH: null,  　　  ccpW: null,  　　  ccpH: null,  　　  btW: null,  　　  btH: null,  　　  /////////////////////////  　　  pre4: null,  　　  preaL: null,  　　  preaT: null,  　　  preaWH: null,  　　  prebL: null,  　　  prebT: null,  　　  prebWH: null,  　　  precL: null,  　　  precT: null,  　　  precWH: null,  　　  ctnLT: 3,  　　  ctnaWH: null,  　　  ctnbWH: null,  　　  ctncWH: null,  　　  //////////////////////////  　　  YN3: null,  　　  YN_OUTWH: null,  　　  YNWH: null,  　　  YN_OUTR: null,  　　  Y_OUTT: null,  　　  N_OUTT: null,  　　  YNLT1: 25,  　　  YNLT2: 20,  　　  //////////////////////////  　　  ctnL: null,  　　  ctnT: null,  　　  black_coverL: null,  　　  black_coverT: null,  　　  /////////////////////////  　　  varied_divL: null,  　　  varied_divT: null,  　　  varied_divWH: null,  　　  varied_divMaxL: null,  　　  varied_divMaxT: null,  　　  varied_div_imgWH: null,  　　  varied_div_imgL: null,  　　  varied_div_imgT: null,  　　  /////////////////////////  　　  imgaW: null,  　　  imgaH: null,  　　  imgaL: null,  　　  imgaT: null,  　　  imgbW: null,  　　  imgbH: null,  　　  imgbL: null,  　　  imgbT: null,  　　  imgcW: null,  　　  imgcH: null,  　　  imgcL: null,  　　  imgcT: null,  　　  /////////////////////////  　　};  　　var GET_DOM = function () {  　　  dom.body = document.body;  　　  dom.pre = $("pre");  　　  dom.ccp = $("ccp");  　　  dom.bt = $("bt");  　　  dom.SelectPicture = $("SelectPicture");  　　  dom.prea = $("prea");  　　  dom.preb = $("preb");  　　  dom.prec = $("prec");  　　  dom.ctna = $("ctna");  　　  dom.ctnb = $("ctnb");  　　  dom.ctnc = $("ctnc");  　　  dom.imga = $("imga");  　　  dom.imgb = $("imgb");  　　  dom.imgc = $("imgc");  　　  dom.Y_OUT = $("Y_OUT");  　　  dom.N_OUT = $("N_OUT");  　　  dom.Y = $("Y");  　　  dom.N = $("N");  　　  dom.ctn = $("ctn");  　　  dom.black_cover = $("black_cover");  　　  dom.fixed_img = $("fixed_img");  　　  dom.varied_div = $("varied_div");  　　  dom.varied_div_img = $("varied_div_img");    　　  dom.TopLeft = $("TopLeft");  　　  dom.TopRi

展开阅读全文