You are here
让移动滑动 有左右 上下 大小 旋转的功能 有大用
星期五, 2018-11-30 06:19 — adminshiping1
注意下面标红的字 就是旋转
{ "transform": "rotate(" + Left_whirling + "deg) scale(" + Left_size + ")" }
rotate 表示旋转
scale 表示缩放
| <script type="text/javascript"> | |
| $(".leftmoveLR").slider({ | |
| range: "min", | |
| value: d[10].LleftandRight, | |
| min: 0, | |
| step: 1, | |
| max: 100, | |
| slide: function (event, ui) { | |
| $(".leftcustomize").css({ left: ui.value + "%" }); | |
| d[10].LleftandRight = ui.value; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| $(".leftmoveNP").slider({ | |
| range: "min", | |
| value: d[10].UpandDown, | |
| min: 0, | |
| step: 1, | |
| max: 100, | |
| slide: function (event, ui) { | |
| $(".leftcustomize").css({ top: ui.value + "%" }); | |
| d[10].UpandDown = ui.value; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| //$(".leftscale").slider({ | |
| // range: "min", | |
| // value: d[10].size, | |
| // min: 1, | |
| // step: 1, | |
| // max: 10, | |
| // slide: function (event, ui) { | |
| // Left_size = ui.value; | |
| // $(".leftcustomize").css({ "transform": "rotate(" + Left_whirling + "deg) scale(" + Left_size + ")" }); | |
| // d[10].size = Left_size; | |
| // setCookie("product", JSON.stringify(d), "d30"); | |
| // } | |
| //}); | |
| $(".leftscale").slider({ | |
| range: "min", | |
| value: d[10].size, | |
| min: 0.1, | |
| step: 0.1, | |
| max: 10, | |
| slide: function (event, ui) { | |
| Left_size = ui.value; | |
| $(".leftcustomize").css({ "transform": "rotate(" + Left_whirling + "deg) scale(" + Left_size + ")" }); | |
| d[10].size = Left_size; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| $(".leftRotation").slider({ | |
| range: "min", | |
| value: d[10].whirling, | |
| min: 0, | |
| step: 1, | |
| max: 360, | |
| slide: function (event, ui) { | |
| Left_whirling = ui.value; | |
| $(".leftcustomize").css({ "transform": "rotate(" + Left_whirling + "deg) scale(" + Left_size + ")" }); | |
| d[10].whirling = Left_whirling; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| $(".RightmoveLR").slider({ | |
| range: "min", | |
| value: d[11].LleftandRight, | |
| min: 0, | |
| step: 1, | |
| max: 100, | |
| slide: function (event, ui) { | |
| $(".rightcustomize").css({ left: ui.value + "%" }); | |
| d[11].LleftandRight = ui.value; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| $(".RightmoveNP").slider({ | |
| range: "min", | |
| value: d[11].UpandDown, | |
| min: 0, | |
| step: 1, | |
| max: 100, | |
| slide: function (event, ui) { | |
| $(".rightcustomize").css({ top: ui.value + "%" }); | |
| d[11].UpandDown = ui.value; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| //$(".Rightscale").slider({ | |
| // range: "min", | |
| // value: d[11].size, | |
| // min: 1, | |
| // step: 1, | |
| // max: 10, | |
| // slide: function (event, ui) { | |
| // Right_size = ui.value; | |
| // $(".rightcustomize").css({ "transform": "rotate(" + Right_whirling + "deg) scale(" + Right_size + ")" }); | |
| // d[11].size = Right_size; | |
| // setCookie("product", JSON.stringify(d), "d30"); | |
| // } | |
| //}); | |
| $(".Rightscale").slider({ | |
| range: "min", | |
| value: d[11].size, | |
| min: 0.1, | |
| step: 0.1, | |
| max: 10, | |
| slide: function (event, ui) { | |
| Right_size = ui.value; | |
| $(".rightcustomize").css({ "transform": "rotate(" + Right_whirling + "deg) scale(" + Right_size + ")" }); | |
| d[11].size = Right_size; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| $(".RightRotation").slider({ | |
| range: "min", | |
| value: d[11].whirling, | |
| min: 0, | |
| step: 1, | |
| max: 360, | |
| slide: function (event, ui) { | |
| Right_whirling = ui.value; | |
| $(".rightcustomize").css({ "transform": "rotate(" + Right_whirling + "deg) scale(" + Right_size + ")" }); | |
| d[11].whirling = Right_whirling; | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| } | |
| }); | |
| //var s = ["a", "b"]; | |
| var s = [ | |
| "a", | |
| "b", | |
| ]; | |
| //var l = { | |
| // "a": [ | |
| // { "Name": "金色", "LeftImg": "/Custom/img/leftlogo.png", "RightImg": "/Custom/img/rightlogo.png" }, | |
| // { "Name": "银色", "LeftImg": "/Custom/img/leftlogo1.png", "RightImg": "/Custom/img/rightlogo1.png" }, | |
| // ], | |
| // "b": [ | |
| // { "Name": "银色", "LeftImg": "/Custom/img/leftlogo2.png", "RightImg": "/Custom/img/rightlogo2.png" }, | |
| // { "Name": "金色", "LeftImg": "/Custom/img/leftlogo3.png", "RightImg": "/Custom/img/rightlogo3.png" }, | |
| // ], | |
| //}; | |
| var l = { | |
| "a":[ | |
| { "Name": "金色", "LeftImg": "/UpLoadFiles/20160906/2016090616100245.png", "RightImg": "/UpLoadFiles/20160906/2016090616100017.png" }, | |
| { "Name": "银色", "LeftImg": "/UpLoadFiles/20160728/2016072811570942.png", "RightImg": "/UpLoadFiles/20160728/2016072811570162.png" }, | |
| ], | |
| "b":[ | |
| { "Name": "银色", "LeftImg": "/UpLoadFiles/20160728/2016072811445235.png", "RightImg": "/UpLoadFiles/20160728/2016072811444921.png" }, | |
| { "Name": "金色", "LeftImg": "/UpLoadFiles/20160728/2016072811443074.png", "RightImg": "/UpLoadFiles/20160728/2016072811442616.png" }, | |
| ], | |
| }; | |
| var thisposition = 0; | |
| $(".Logostyle a").click(function () { | |
| if (parseInt($(".leftcustomize").attr("rel")) == 1 || parseInt($(".rightcustomize").attr("rel")) == 1) { | |
| $(".popupbg,.popupbox").fadeIn(300); | |
| $(".popupbox h3 span").text("提示"); | |
| $(".popupboxtext").text("是否要删除自定义上传logo！"); | |
| $(".popupboxa").html("<a href='javascript:;' class='deletecustomize'>确定</a><a href='javascript:;' class='close'>取消</a>"); | |
| return false; | |
| } | |
| $(".headsetBiglogo").attr("rel", 1); | |
| var position = $(".selectheadset").attr("rel"); | |
| var t = $(this).index(); | |
| var a = l[s[t]]; | |
| var title = $(this).text(); | |
| var leftimg = a[thisposition].LeftImg; | |
| var rightimg = a[thisposition].RightImg; | |
| var leftlogoColour = a[thisposition].Name; | |
| var rightlogoColour = a[thisposition].Name; | |
| var h = ""; | |
| var z = "Logostyle_L"; | |
| var y = "Logostyle_R"; | |
| var flag = $(this).attr("flag"); | |
| d.forEach(function (e) { | |
| if (e["Id"] == flag) { | |
| e["Rel"] = "1"; | |
| } | |
| }); | |
| for (i = 0; i < a.length; i++) { | |
| h += "<a flag='prLogo' href='javasrcipt:;' LeftImg='" + a[i].LeftImg + "' RightImg='" + a[i].RightImg + "'>" + a[i].Name + "</a>" | |
| } | |
| $(".LogostyleColour").html(h); | |
| $(this).addClass("cur").siblings().removeClass("cur"); | |
| $(".LogostyleColour a").eq(thisposition).addClass("cur"); | |
| var Coloutitle = $(".LogostyleColour a").eq(thisposition).text(); | |
| var dx = { | |
| Value: "" + title + "", //存值名称 | |
| logoColour: "" + Coloutitle + "", //存颜色名称 | |
| LeftImg: "" + leftimg + "", //存值左边图片 | |
| RightImg: "" + rightimg + "", //存值右边图片 | |
| position: "" + position + "", //判断左右选择 | |
| leftname: '.leftlogotitle', //体现左边名称层 | |
| rightname: '.rightlogotitle', //体现右边名称层 | |
| Colourleftname: '.leftlogoColour', //体现颜色左边名称层 | |
| Colourrightname: '.rightlogoColour', //体现颜色右边名称层 | |
| imglayer: 'div.headsetBiglogo' //体现图片位置层 | |
| }; | |
| Selectstyle(dx, flag, z, y); | |
| }); | |
| $(".LogostyleColour a").live("click", function () { | |
| if (parseInt($(".leftcustomize").attr("rel")) == 1 || parseInt($(".rightcustomize").attr("rel")) == 1) { | |
| $(".popupbg,.popupbox").fadeIn(300); | |
| $(".popupbox h3 span").text("提示"); | |
| $(".popupboxtext").text("是否要删除自定义上传logo！") | |
| $(".popupboxa").html("<a href='javascript:;' class='deletecustomize'>确定</a><a href='javascript:;' class='close'>取消</a>") | |
| return false | |
| } | |
| $(".headsetBiglogo").attr("rel", 1); | |
| thisposition = $(this).index(); | |
| var leftimg = $(this).attr("leftimg"); | |
| var rightimg = $(this).attr("rightimg"); | |
| var position = $(".selectheadset").attr("rel"); | |
| $(this).addClass("cur").siblings().removeClass("cur"); | |
| var title = $(this).text(); | |
| var flag = $(this).attr("flag"); | |
| var z = "Logostyle_L"; | |
| var y = "Logostyle_R"; | |
| var dx = { | |
| logoColour: "" + title + "", //存颜色名称 | |
| LeftImg: "" + leftimg + "", //存值左边图片 | |
| RightImg: "" + rightimg + "", //存值右边图片 | |
| position: "" + position + "", //判断左右选择 | |
| Colourleftname: '.leftlogoColour', //体现颜色左边名称层 | |
| Colourrightname: '.rightlogoColour', //体现颜色右边名称层 | |
| imglayer: 'div.headsetBiglogo' //体现图片位置层 | |
| }; | |
| SelectColour(dx, flag, z, y) | |
| }); | |
| setCookie("inplayer", "1", "d30"); | |
| $(".playerUpload").live("click",function(){ | |
| setCookie("inplayer", 0, "d30"); | |
| $(".popupbg,.popupbox").fadeOut(300); | |
| var csname = $(this).attr("csname"); | |
| var cllr = $(this).attr("cllr"); | |
| Qrupload(csname,cllr); | |
| }); | |
| $(".leftUpload").click(function () { | |
| var inplay = getCookie("inplayer"); | |
| if (parseInt(inplay) == 1) { | |
| title = "温馨提示"; | |
| content = "为了更好地实现该功能，请选用谷歌浏览器；待上传的自定义个性图片需要用底色为透明的png格式图片。"; | |
| button = "<a href='javascript:;' class='playerUpload' csname='leftUpload' cllr='left'>确定</a><a href='javascript:;' class='close'>取消</a>" | |
| Popuplayer(title, content, button); | |
| return false; | |
| } | |
| if (parseInt($(".headsetBiglogo").attr("rel")) == 1) { | |
| title = "提示"; | |
| content = "是否要删除默认Logo样式 ? <br/>为了更好地实现该功能，请选用谷歌浏览器；待上传的自定义个性图片需要用底色为透明的png格式图片"; | |
| button = "<a href='javascript:;' class='deletelogostyle'>确定</a><a href='javascript:;' class='close'>取消</a>" | |
| Popuplayer(title, content, button); | |
| return false; | |
| } | |
| var input = $(this).next(); | |
| input.click(); | |
| $(input).on("change", function () { | |
| upload(input,"left"); | |
| }); | |
| //Compute(); | |
| }); | |
| $(".rightUpload").click(function () { | |
| var inplay = getCookie("inplayer"); | |
| if (parseInt(inplay) == 1) { | |
| title = "温馨提示"; | |
| content = "为了更好地实现该功能，请选用谷歌浏览器；待上传的自定义个性图片需要用底色为透明的png格式图片。"; | |
| button = "<a href='javascript:;' class='playerUpload' csname='rightUpload' cllr='right'>确定</a><a href='javascript:;' class='close'>取消</a>" | |
| Popuplayer(title, content, button); | |
| return false; | |
| } | |
| if (parseInt($(".headsetBiglogo").attr("rel")) == 1) { | |
| title = "提示"; | |
| content = "是否要删除默认Logo样式 ? <br/>为了更好地实现该功能，请选用谷歌浏览器；待上传的自定义个性图片需要用底色为透明的png格式图片"; | |
| button = "<a href='javascript:;' class='deletelogostyle'>确定</a><a href='javascript:;' class='close'>取消</a>" | |
| Popuplayer(title, content, button); | |
| return false; | |
| } | |
| var input = $(this).next(); | |
| input.click(); | |
| input.on("change", function () { | |
| upload(input, "right"); | |
| }); | |
| //Compute(); | |
| }); | |
| function setUpImg(imgurl, flag) { | |
| //alert("为了更好地实现该功能，请选用谷歌浏览器；待上传的自定义个性图片需要用底色为透明的png格式图片"); | |
| if (flag == "right") { | |
| $(".custommade").attr("rel", 1); //已上传图片 | |
| $(".rightUpload").attr("Urlimg", imgurl); | |
| var imgurl = $(".rightUpload").attr("Urlimg"); | |
| var logoimg = $(".rightUpload").attr("rightimg"); | |
| DYrightlogo(imgurl, logoimg); | |
| $(".rightUpload").next().next().show(); | |
| } | |
| else if (flag == "left") { | |
| console.log(flag, imgurl); | |
| $(".custommade").attr("rel", 1); //已上传图片 | |
| $(".leftUpload").attr("Urlimg", imgurl); | |
| var imgurl = $(".leftUpload").attr("Urlimg"); | |
| var logoimg = $(".leftUpload").attr("leftimg"); | |
| DYleftlogo(imgurl, logoimg); | |
| $(".leftUpload").next().next().show(); | |
| } | |
| Compute(); | |
| } | |
| //删除自定义logo | |
| $(".deletecustomize").live("click", function () { | |
| $(".custommade").attr("rel", 0).removeAttr("style"); | |
| $(".headsetsmalllogo").removeAttr("style"); | |
| $(".popupbg,.popupbox").fadeOut(300); | |
| $(".pattern").text("无"); | |
| $(".custommadeprice").text("0"); | |
| $(".leftmoveLR a").css({ left: 0 + "%" }); | |
| $(".leftmoveNP a").css({ left: 0 + "%" }); | |
| $(".RightmoveLR a").css({ left: 0 + "%" }); | |
| $(".RightmoveNP a").css({ left: 0 + "%" }); | |
| d.forEach(function (e) { | |
| if (e["Id"] == "prcustomizeLogo") { | |
| e["Imglogo"] = " "; | |
| e["LeftImg"] = " "; | |
| e["RightImg"] = " "; | |
| e["Width"] = " "; | |
| e["Height"] = " "; | |
| e["UpandDown"] = "0"; | |
| e["LleftandRight"] = "0"; | |
| e["size"] = "1"; | |
| e["whirling"] = "0"; | |
| e["Price"] = "0"; | |
| e["Rel"] = "0"; | |
| } | |
| }); | |
| $(".customizeUpload dl").hide(); | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| temp_cookie = d; | |
| Compute(); | |
| getCk(); | |
| }) | |
| //删除默认logo样式 | |
| $(".deletelogostyle").live("click", function () { | |
| $(".headsetBiglogo").attr("rel", 0).removeAttr("style"); | |
| $(".popupbg,.popupbox").fadeOut(300); | |
| $(".Logostyle a,.LogostyleColour a").removeClass("cur"); | |
| $(".leftlogotitle,.rightlogotitle,.leftlogoColour,.rightlogoColour").text(" ") | |
| d.forEach(function (e) { | |
| if (e["Id"] == "prLogo") { | |
| e["Value"] = " "; | |
| e["logoColour"] = " "; | |
| e["LeftImg"] = " "; | |
| e["RightImg"] = " "; | |
| e["Rel"] = "0"; | |
| } | |
| }); | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| temp_cookie = d; | |
| getCk(); | |
| }) | |
| $(".close").live("click", function () { | |
| $(".popupbg,.popupbox").fadeOut(300); | |
| }) | |
| var dx = { | |
| Value: '', //存值名称 | |
| LeftImg: '', //存值左边图片 | |
| RightImg: '', //存值右边图片 | |
| position: '', //判断左右选择 | |
| leftname: '', //体现左边名称层 | |
| rightname: '', //体现右边名称层 | |
| Colourleftname: '', //体现颜色左边名称层 | |
| Colourrightname: '', //体现颜色右边名称层 | |
| imglayer: '' //体现图片位置层 | |
| }; | |
| //默认logo样式选择 | |
| function Selectstyle(dx, flag, z, y) { | |
| if (dx.position == -1) { | |
| d.forEach(function (e) { | |
| if (e["Name"] == z) { | |
| e["Value"] = "" + dx.Value + ""; | |
| e["logoColour"] = "" + dx.logoColour + ""; | |
| e["LeftImg"] = "" + dx.LeftImg + ""; | |
| } | |
| }); | |
| } else if (dx.position == 0) { | |
| d.forEach(function (e) { | |
| if (e["Id"] == flag) { | |
| e["Value"] = "" + dx.Value + ""; | |
| e["logoColour"] = "" + dx.logoColour + ""; | |
| e["LeftImg"] = "" + dx.LeftImg + ""; | |
| e["RightImg"] = "" + dx.RightImg + ""; | |
| } | |
| }); | |
| } else if (dx.position == 1) { | |
| d.forEach(function (e) { | |
| if (e["Name"] == y) { | |
| e["Value"] = "" + dx.Value + ""; | |
| e["logoColour"] = "" + dx.logoColour + ""; | |
| e["RightImg"] = "" + dx.RightImg + ""; | |
| } | |
| }); | |
| } | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| temp_cookie = d; | |
| getCk(); | |
| }; | |
| //默认logo颜色 | |
| function SelectColour(dx, flag, z, y) { | |
| if (dx.position == -1) { | |
| d.forEach(function (e) { | |
| if (e["Name"] == z) { | |
| e["logoColour"] = "" + dx.logoColour + ""; | |
| e["LeftImg"] = "" + dx.LeftImg + ""; | |
| } | |
| }); | |
| } else if (dx.position == 0) { | |
| d.forEach(function (e) { | |
| if (e["Id"] == flag) { | |
| e["logoColour"] = "" + dx.logoColour + ""; | |
| e["LeftImg"] = "" + dx.LeftImg + ""; | |
| e["RightImg"] = "" + dx.RightImg + ""; | |
| } | |
| }); | |
| } else if (dx.position == 1) { | |
| d.forEach(function (e) { | |
| if (e["Name"] == y) { | |
| e["logoColour"] = "" + dx.logoColour + ""; | |
| e["RightImg"] = "" + dx.RightImg + ""; | |
| } | |
| }); | |
| } | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| temp_cookie = d; | |
| getCk(); | |
| }; | |
| function Qrupload(q,lr){ | |
| var input = $("."+q).next(); | |
| input.click(); | |
| $(input).on("change", function () { | |
| upload(input,""+lr+""); | |
| }) | |
| } | |
| //弹出层 | |
| function Popuplayer(title, content, button) { | |
| $(".popupbg,.popupbox").fadeIn(300); | |
| $(".popupbox h3 span").text(title); | |
| $(".popupboxtext").html(content); | |
| $(".popupboxa").html(button); | |
| } | |
| //左边logo自定义上传 | |
| function DYleftlogo(imgurl, logoimg) { | |
| var leftzdlogo = imgurl; | |
| var newimg = new Image(); | |
| newimg.src = imgurl; | |
| newimg.onload = function () { | |
| imgWidth = this.width; | |
| imgHeight = this.height; | |
| var maxHeight = maxwidth * imgHeight / imgWidth; | |
| d.forEach(function (e) { | |
| if (e["Name"] == "customize_logo_L") { | |
| e["Imglogo"] = "" + leftzdlogo + ""; | |
| e["LeftImg"] = "" + logoimg + ""; | |
| e["Width"] = "" + (maxwidth / 16) + ""; | |
| e["Height"] = "" + (maxHeight / 18) + ""; | |
| e["UpandDown"] = "" + ((actualheight / 6) - (maxHeight / 18) / 2) + ""; | |
| e["LleftandRight"] = "" + ((maxwidth / 6) - (maxwidth / 16) / 2) + ""; | |
| e["Price"] = "360"; | |
| e["Rel"] = "1"; | |
| } | |
| }); | |
| Llogo_lr = ((maxwidth / 6) - (maxwidth / 16) / 2); | |
| Llogo_ud = ((actualheight / 6) - (maxHeight / 18) / 2) | |
| $(".leftmoveLR a").css({ left: Llogo_lr + "%" }); | |
| $(".leftmoveNP a").css({ left: Llogo_ud + "%" }); | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| temp_cookie = d; | |
| getCk(); | |
| } | |
| } | |
| //右边logo自定义上传 | |
| function DYrightlogo(imgurl, logoimg) { | |
| var rightzdlogo = imgurl; | |
| var newimg = new Image(); | |
| newimg.src = imgurl; | |
| newimg.onload = function () { | |
| imgWidth = this.width; | |
| imgHeight = this.height; | |
| var maxHeight = maxwidth * imgHeight / imgWidth; | |
| d.forEach(function (e) { | |
| if (e["Name"] == "customize_logo_R") { | |
| e["Imglogo"] = "" + rightzdlogo + ""; | |
| e["RightImg"] = "" + logoimg + ""; | |
| e["Width"] = "" + (maxwidth / 16) + ""; | |
| e["Height"] = "" + (maxHeight / 18) + ""; | |
| e["UpandDown"] = "" + ((actualheight / 6) - (maxHeight / 18) / 2) + ""; | |
| e["LleftandRight"] = "" + (maxwidth / 9) + ""; | |
| e["Price"] = "360"; | |
| e["Rel"] = "1"; | |
| } | |
| }); | |
| Rlogo_lr = (maxwidth / 9); | |
| Rlogo_ud = ((actualheight / 6) - (maxHeight / 18) / 2) | |
| $(".RightmoveLR a").css({ left: Rlogo_lr + "%" }); | |
| $(".RightmoveNP a").css({ left: Rlogo_ud + "%" }); | |
| setCookie("product", JSON.stringify(d), "d30"); | |
| temp_cookie = d; | |
| getCk(); | |
| } | |
| } | |
| Compute(); | |
| function Compute() { | |
| var Total = 0; | |
| $(".Uniteprice").each(function () { | |
| Total += +$(this).text() | |
| }); | |
| $(".Colourprice").text(Total); | |
| } | |
| function upload(obj,flag) { | |
| var formData = new FormData(); | |
| var successFileList = new Array(); // 上传成功文件列表 | |
| var fieldFileList = new Array(); //上传失败文件列表 | |
| var fileList = obj[0].files; | |
| var upFileLength = 0; //已处理的文件个数 | |
| if (fileList.length > 0) { | |
| var xhr = null; | |
| if (window.XMLHttpRequest) {// for all new browsers | |
| xhr = new XMLHttpRequest(); | |
| } | |
| else if (window.ActiveXObject) {// for IE5 and IE6 | |
| xhr = new ActiveXObject("Microsoft.XMLHTTP"); | |
| } | |
| console.log("文件个数 : " + fileList.length); | |
| //上传入口 组装FormData | |
| function markFormdata() { | |
| formData = new FormData(); | |
| formData.append("upload_" + upFileLength, fileList[upFileLength]); | |
| startUpload(formData); | |
| } | |
| //上传完成后执行的函数 判断是否还有文件等等 | |
| function UploadFinish() { | |
| upFileLength++; //下标+1 | |
| //判断是否还有文件 | |
| if (upFileLength <= fileList.length - 1) { | |
| markFormdata(); | |
| } else { | |
| //全部处理完成 | |
| setUpImg(successFileList[0],flag); | |
| //return successFileList[0]; | |
| } | |
| } | |
| //上传函数 | |
| function startUpload(formdata) { | |
| //监听上传进度 | |
| xhr.upload.onprogress = function (event) { | |
| //当开始有文件大小的时候在计算 | |
| if (event.lengthComputable) { | |
| //计算百分比 | |
| var percent = Math.round(event.loaded * 100 / event.total); | |
| console.log(percent); | |
| } | |
| } | |
| //开始上传的时候 | |
| xhr.onloadstart = function (event) { | |
| console.log("upload开始"); | |
| //如果有停止按钮 | |
| $("#stopUpload").one("click", function () { | |
| xhr.abort(); | |
| }) | |
| } | |
| //上传成功 | |
| xhr.onload = function (event) { | |
| console.log("上传成功"); | |
| console.log(xhr.responseText); | |
| successFileList.push(xhr.responseText); | |
| //var ret = JSON.parse(xhr.responseText); | |
| //console.log(ret); | |
| } | |
| xhr.onerror = function (event) { | |
| console.log("上传错误"); | |
| fieldFileList.push(xhr.responseText); | |
| } | |
| //上传完成 不管成功与否都会触发 | |
| xhr.onloadend = function (event) { | |
| console.log("完成"); | |
| UploadFinish(); | |
| } | |
| xhr.onabort = function (event) { | |
| console.log("上传取消"); | |
| } | |
| xhr.open('POST', "/Custom/ashx/upload.ashx", true); | |
| xhr.send(formdata); | |
| } | |
| markFormdata(); | |
| } | |
| else { | |
| alert("请选择上传的文件"); | |
| } | |
| } | |
| </script> |
普通分类: