首页 > 代码库 > 表单上传数据，第一次写，很多地方不理解。。。写了个开头就写不下去了，希望有人能帮忙完善下。
表单上传数据，第一次写，很多地方不理解。。。写了个开头就写不下去了，希望有人能帮忙完善下。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"> 8 <link rel="stylesheet" href=http://www.mamicode.com/"css/reset.css" /> 9 <link rel="stylesheet" href=http://www.mamicode.com/"css/common.css" /> 10 <link rel="stylesheet" href=http://www.mamicode.com/"css/zb-quality-auth.css" /> 11 <title>此刻广告系统</title> 12 </head> 13 14 <body> 15 <div class="header"> 16 <div class="container header-container"> 17 <a target="_blank" class="logo"><img src=http://www.mamicode.com/"res/img/logo.png" alt="你的个人电视台"></a> 18 <ul class="header-nav"> 19 <li> 20 <a href=http://www.mamicode.com/"">广告平台</a> 21 </li> 22 <li> 23 <a href=http://www.mamicode.com/"">主播身价天梯</a> 24 </li> 25 <li> 26 <a target="_blank" href=http://www.mamicode.com/"http://cktools.cikevideo.com/installer/pc/setup/ciscik_setup_1.4.1.6307.exe">此刻主播助手</a> 27 </li> 28 </ul> 29 </div> 30 </div> 31 <div class="top-nav"> 32 <div class="container top-nav-container"> 33 <a href=http://www.mamicode.com/"">返回</a><span>此刻首页-个人中心</span> 34 <a href=http://www.mamicode.com/"javascript:;" class="zb-logout">注销</a> 35 </div> 36 </div> 37 <div class="main"> 38 <div class="container main-container"> 39 <div class="main-left-container"> 40 <ul class="main-left-nav"> 41 <li class="active"> 42 <a target="_blank">个人中心</a> 43 </li> 44 <li> 45 <a target="_blank">广告收益</a> 46 </li> 47 <li> 48 <a target="_blank">收益对账</a> 49 </li> 50 <span></span> 51 </ul> 52 </div> 53 <div class="main-right-container"> 54 <div class="auth-title"> 55 <div class="sub-title">人气等级认证</div> 56 <div class="auth-title-right"> 57 <p>人气等级越高，可领取的广告任务价值越高</p> 58 </div> 59 </div> 60 <div class="content-container auth-main"> 61 <form id="div1"> 62 <div class="item-container" id="Additional"> 63 <!--<div class="naohiro-nickname"><span>直播昵称</span><input type="text" placeholder="请填写观众看到的直播昵称">直播类型 64 <select class="selection"> 65 </select> 66 <select class="options"> 67 </select> 68 </div>--> 69 70 <div class="item"><span>直播间地址</span><input type="text" class="submission" id="address"> 71 </div> 72 73 <div class="item"><span>直播时段</span><input type="text" class="submission-1" id="timer"> 74 </div> 75 <p class="Prompt-information"><span class="adderss-01"><!--请输入直播地址--></span><span class="timer-01"><!--请输入直播时段--></span></p> 76 </div> 77 </form> 78 <p>请同时填写直播时间和频率。如：每周一至周五15：00-18：00；每周三20：00-22：00<br/>如无固定周期，请填写“不定时”</p> 79 <h2><a target="_blank" class="click"><img src=http://www.mamicode.com/"res/img/ico_add.png">添加更多直播间</a></h2> 80 <div class="auth-ctrl"> 81 <a target="_blank" id="rc-right" class="submit-btn">提交</a> 82 <a target="_blank" id="rc-left" class="">重置</a> 83 </div> 84 85 </div> 86 <!--等待页面--> 87 <div class="content-container id-worth-cal-container"> 88 <img src=http://www.mamicode.com/"res/img/loading1.gif" alt=""> 89 <p class="loading-words">计算身价中，请稍后</p> 90 </div> 91 <!--跳转页面--> 92 <div class="content-container id-popularity-ratong-02-container"> 93 <div class="online-number-01"> 94 <ul> 95 <li>斗鱼账号当前在线人数<span class="number-01">288,666,900</span></li> 96 <li>斗鱼账号当前订阅数<span class="number-02">288,666,900</span></li> 97 </ul> 98 <div class="online-number-01-right"> 99 <p>已通过审核</p>100 <a target="_blank">点击领取广告</a>101 </div>102 </div>103 104 <div class="online-number-02">105 <ul>106 <li>斗鱼账号当前在线人数<span class="number-01">未开播，无法获取</span></li>107 <li>斗鱼账号当前订阅数<span class="number-02">288,666,900</span></li>108 </ul>109 <div class="online-number-02-right">110 <p>已通过初步审核，<br/>请在7日内开播一次完成审核</p>111 </div>112 <div class="Warning-column">113 <img src=http://www.mamicode.com/"res/img/ico_warning.png">114 <p class="Warning-column-son">审核期间会尽享随机人工抽查，可能会有工作人员与您取得联系</p>115 <p>此刻审核无需任何花费，工作人员不会索取任何礼物丶金钱。谨防诈骗。</p>116 </div>117 </div>118 </div>119 120 </div>121 </div>122 <div class="clear-both"></div>123 </div>124 <div class="footer">125 <div class="container footer-container">126 <p>www.ciscik.com 2011-2015 ©All Rights Reserved 北京此刻科技有限公司 京ICP备15030780号-2</p>127 <div class="footer-nav">128 <a target="_blank">关于此刻</a>129 <a target="_blank">联系我们</a>130 <a target="_blank">招聘信息</a>131 <a target="_blank">用户协议</a>132 </div>133 <p>公司地址：北京市石景山区石景山路23号中础大厦B座7层709</p>134 </div>135 </div>136 <script src=http://www.mamicode.com/"lib/jquery-1.12.4.min.js"></script>137 <script>138 $(function() {139 $(‘.main-left-container‘).find(‘ul li‘).hover(140 function() {141 $(‘.main-left-container‘).find(‘ul li‘).attr(‘class‘, ‘‘);142 $(this).attr(‘class‘, ‘active‘);143 }144 )145 })146 var oClick = document.querySelector(‘.click‘);147 var i = document.querySelectorAll(‘.item-container‘).length;148 oClick.onclick = function() {149 i++;150 // xuanran();151 // alert(‘添加‘+i);152 if(i < 10) {153 var add_jietu = document.getElementById(‘Additional‘);154 var nodeFather = add_jietu.parentNode;155 var node_clone = add_jietu.cloneNode();156 content = add_jietu.innerHTML;157 node_clone.removeAttribute(‘id‘);158 node_clone.innerHTML = content;159 nodeFather.appendChild(node_clone);160 }161 // if(i > 2) {162 // i = 3;163 // }164 }165 // $(oClick).click(function(event) {166 // var oClone = $(‘.auth-main-top‘).eq(0).clone();167 // oClone.find(‘.selection‘).empty();168 // oClone.find(‘.options‘).empty();169 // $.each(arr, function(index, val) {170 // $(‘<option>‘ + val.name + ‘</option>‘).appendTo(oClone.find(‘.selection‘));171 // if(index == 0) {172 // $.each(val.value, function(index2, val2) {173 // $(‘<option>‘ + val2 + ‘</option>‘).appendTo(oClone.find(‘.options‘));174 // });175 // }176 // });177 // oClone.appendTo(‘#div1‘);178 // });179 </script>180 <script type="text/javascript" src=http://www.mamicode.com/"js/utils.js"></script>181 <script type="text/javascript" src=http://www.mamicode.com/"js/common.js"></script>182 <script type="text/javascript" src=http://www.mamicode.com/"js/config.js"></script>183 <script type="text/javascript" src=http://www.mamicode.com/"js/zbObj.js"></script>184 <script type="text/javascript" src=http://www.mamicode.com/"js/zb-quality-auth.js"></script>185 </body>186 187 </html>
html部分。。。
/** * 主播认证 */$(function() { init();})function init() { if(!zbObj.isLogin()) { window.location.href = "index.html"; return; } else { $(".zb-logout").show(); $(".zb-logout").click(function() { zbObj.logout(); window.location.href = "index.html"; });// ajaxGetZbInfo(zbObj.user.cid); $("#rc-right").click(function() { saveUserInfo(); }); $("#rc-left").click(function() { resetting(); }); }}function saveUserInfo(){ var userCiscikId = zbObj.user.cid; var Url = $("#address").val(); var timepart = $("#timer").val(); if(){ var ajaxUrl = config.zbApi.savezbadauthinfo; var parameter = { ciscik_id: userCiscikId, ourl:Url, otimer:timepart, platform: getSys() }; $.ajax({ type:‘post‘, async: true, url: ajaxUrl, datatype:‘jsonp‘, data:parameter, jsonp: ‘callback‘, beforeSend:function(){ showContainerByClassName("id-worth-cal-container"); }, success:function(){ if(json.code == 0) { //直播地址审核通过 ajaxGetZbIdAuthStatus(cid); } }, error: function() { showErrorMsg1("数据提交失败，请重新提交"); showContainerByClassName("id-auth-container"); } }) } }function ajaxGetZbIdAuthStatus(cid){ var ajaxUrl = config.zbApi.getzbidauthstatus; var parameter = { ciscik_id: cid, platform: getSys() }; $.ajax({ type:"post", url:ajaxUrl, async:true, dataType: ‘jsonp‘, data: parameter, jsonp: ‘callback‘, success:function(json){ }, error: function() {} });}//重置function resetting() {// xuanran(); $(‘#div1‘)[0].reset(); i = 1; var aDiv = document.getElementById(‘div1‘).children; if(document.querySelectorAll(‘.item-container‘).length > 1) { var aDiv = document.getElementById(‘div1‘).children; document.getElementById(‘div1‘).removeChild(aDiv[1]); while(document.querySelectorAll(‘.item-container‘).length - 1) //当div下还存在子节点时 循环继续 { document.getElementById(‘div1‘).removeChild(aDiv[aDiv.length - 1]); } } }
目前就写成这样了。。。。
/** * 主播身份认证 */$(function() { init();})var verBtnCanClick = true;var verTimeDistance = 59;var verTimeObj = null;function init() { if(!zbObj.isLogin()) { window.location.href = "index.html"; return; } else { $(".zb-logout").show(); $(".zb-logout").click(function() { zbObj.logout(); window.location.href = "index.html"; }); ajaxGetBankList(); var sexSty = "font-size:16px;margin:0 10px;" $("#sex-continer").ckradio({ itemStyle: sexSty, itemStr: ["男", "女"], itemVal: ["1", "2"], checkedIndex: 0, itemId: "sex-continer", id: "user-sex" }); $(".get-verification-btn").click(function() { if(verBtnCanClick) { var phone = $("#user-phone").val(); if(phone == null || phone == undefined || phone == "") { alert("请输入手机号"); return false; } if(!(/^1[34578]\d{9}$/.test(phone))) { alert("手机号码有误，请重填"); return false; } else { verBtnCanClick = false; verTimeObj = window.setInterval(countDown, 1000); ajaxSendVerCode(phone); $(".popup-container .ver-code").val(""); $(".popup-container").show(); } } }); //手机验证码弹出ceng $(".popup-container .close-img").click(function() { $(".popup-container").hide(); }); $(".popup-container .submit-btn").click(function() { var verCode = $("#ver-code").val(); var phoneNum = $("#user-phone").val(); //正则验证 if(!checkVerCode(verCode)) { $("#ver-code-errormsg").html("").html("请输入验证码").show().fadeOut(4000); } else { //服务器验证 ajaxCheckVerCode(phoneNum, verCode); } }); initUserIdPicPage(); //上传身份证图片部分 $("#sumbit-btn").click(function() { saveUserInfo(); }); $("#reset-btn").click(function() { resetPage(); }); }}/** * 提交数据 */function saveUserInfo() { var userCiscikId = zbObj.user.cid; var userName = $("#user-name").val(); var userSex = $("#user-sex").val(); var userEmail = $("#user-email").val(); var userQQ = $("#user-qq").val(); var userPhoneNum = $("#user-phone").val(); var userIdNum = $("#user-id-num").val(); var bankId = $("#bank-id option:selected").val(); var userBCardNum = $("#user-bcardnum").val(); var userFace = $("#user-idpic1").val(); var userIdImageFace = $("#user-idpic2").val(); var userIdImageInverse = $("#user-idpic3").val(); if(checkUserName(userName) && checkEmail() && checkQQ(userQQ) && checkPhoneNum(userPhoneNum) && checkBCardNum(userBCardNum) && checkIsUploadIdPic1(userFace) && checkIsUploadIdPic2(userIdImageFace) && checkIsUploadIdPic3(userIdImageInverse)) { var ajaxUrl = config.zbApi.savezbidauthinfo; var parameter = { ciscik_id: userCiscikId, user_name: userName, sex: userSex, mail: userEmail, qq: userQQ, phone: userPhoneNum, id_num: userIdNum, bank_id: bankId, bank_cardnumber: userBCardNum, id_img_user_face: userFace, id_img_face: userIdImageFace, id_img_inverse: userIdImageInverse, platform: getSys() }; $.ajax({ type: ‘post‘, async: true, url: ajaxUrl, dataType: ‘jsonp‘, data: parameter, jsonp: ‘callback‘, beforeSend: funtion(XMLHttpRequest) { showContainerByClassName("id-auth-loading-container"); }, success: function(json) { if(json.code == 0) { //身份审核数据提交成功 ajaxGetZbIdAuthStatus(cid); } }, error: function() { showErrorMsg1("数据提交失败，请重新提交"); showContainerByClassName("id-auth-container"); } }); }}/** * 获取主播身份认证状态 */function ajaxGetZbIdAuthStatus(cid) { var ajaxUrl = config.zbApi.getzbidauthstatus; var parameter = { ciscik_id: cid, platform: getSys() }; $.ajax({ type: ‘post‘, async: true, url: ajaxUrl, dataType: ‘jsonp‘, data: parameter, jsonp: ‘callback‘, success: function(json) { if(json.code == 0) { if(json.data.status == 0) { showContainerByClassName("id-auth-rg-container"); } else if(json.data.status == 1) { showContainerByClassName("id-auth-ok-container"); zbObj.user.id_status = 1; utilObj.setCookie(config.zbcookiestr, encodeURIComponent(JSON.stringify(zbObj.user))); } else if(json.data.status == 2) { showContainerByClassName("id-auth-fail-container"); $("#id-auth-fail-msg").html("").html(json.data.examine_info); } } }, error: function() {} });}/** * 根据样式的类名显示响应容器，其他容器隐藏 * @param {Object} className */function showContainerByClassName(className) { $(".content-container").hide(); $("." + className).show();}/** * 检测姓名 * @param {Object} obj * @param {Object} data */function checkUserName(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.nameError.msg1); return false; } if(utilObj.isValidReg(data)) { showErrorMsg1(config.zbIdAuthErrorMsg.nameError.msg2); return false; } if(utilObj.isValidLength(data, 50)) { showErrorMsg1(config.zbIdAuthErrorMsg.nameError.msg3); return false; } return true;}/** * 检测邮箱 * @param {Object} data */function checkEmail(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.emailError.msg1); return false; } if(utilObj.isEmail(data)) { return true; } return false;}/** * 检测QQ * @param {Object} data */function checkQQ(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.qqError.msg1); return false; } if(utilObj.isValidReg(data)) { showErrorMsg1(config.zbIdAuthErrorMsg.qqError.msg2); return false; } if(utilObj.isValidLength(data, 40)) { showErrorMsg1(config.zbIdAuthErrorMsg.qqError.msg2); return false; } return true;}/** * 检测手机号 * @param {Object} data */function checkPhoneNum(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.phoneNumError.msg1); return false; } if(utilObj.isPhoneNum(data)) { showErrorMsg1(config.zbIdAuthErrorMsg.phoneNumError.msg2); return true; } return false;}/** * 检测银行卡号 * @param {Object} data */function checkBCardNum(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.bankCardCodeError.msg1); return false; } if(utilObj.isNumber(data)) { showErrorMsg1(config.zbIdAuthErrorMsg.bankCardCodeError.msg2); return true; } if(utilObj.isValidLength(data, 19)) { showErrorMsg1(config.zbIdAuthErrorMsg.bankCardCodeError.msg2); return true; } return false;}/** * 检测用户是否上传手持身份证照片 * @param {Object} data */function checkIsUploadIdPic1(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.uploadIdPic1Error.msg1); return false; } return true;}/** * 检测用户是否上传身份证正面照片 * @param {Object} data */function checkIsUploadIdPic2(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.uploadIdPicw2Error.msg1); return false; } return true;}/** * 检测用户是否上传身份证背面照片 * @param {Object} data */function checkIsUploadIdPic3(data) { if(data =http://www.mamicode.com/= null || data =http://www.mamicode.com/= "" || data =http://www.mamicode.com/= undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.uploadIdPic3Error.msg1); return false; } return true;}/** * 错误信息提示1 * @param {Object} msg */function showErrorMsg1(msg) { alert(msg);}/** * 初始化主播上传身份证图片 */function initUserIdPicPage() { //手持身份证 $("#upload-user-idpic1").dmUploader({ url: config.zbApi.uploaduseridpic, dataType: ‘json‘, allowedTypes: ‘image/*‘, onNewFile: function(id, file) { if(typeof FileReader !== "undefined") { var reader = new FileReader(); reader.onload = function(e) { $("#preview-user-idpic1").attr(‘src‘, e.target.result); } reader.readAsDataURL(file); } else { console.error("FileReader undefined"); } }, onUploadProgress: function(id, percent) {}, onUploadSuccess: function(id, data) { $("#user-idpic1").val("手持照照片名称"); console.error(JSON.stringify(data)); }, onUploadError: function(id, message) {}, onFileTypeError: function(file) {}, onFileSizeError: function(file) {}, onFallbackMode: function(message) {} }); //主播身份证正面照 $("#upload-user-idpic2").dmUploader({ url: config.zbApi.uploaduseridpic, dataType: ‘json‘, allowedTypes: ‘image/*‘, onNewFile: function(id, file) { if(typeof FileReader !== "undefined") { var reader = new FileReader(); reader.onload = function(e) { $("#preview-user-idpic2").attr(‘src‘, e.target.result); } reader.readAsDataURL(file); } else { console.error("FileReader undefined"); } }, onUploadProgress: function(id, percent) {}, onUploadSuccess: function(id, data) { $("#user-idpic2").val("正面照片名称"); console.error(JSON.stringify(data)); }, onUploadError: function(id, message) {}, onFileTypeError: function(file) {}, onFileSizeError: function(file) {}, onFallbackMode: function(message) {} }); //主播身份证背面照片 $("#upload-user-idpic3").dmUploader({ url: config.zbApi.uploaduseridpic, dataType: ‘json‘, allowedTypes: ‘image/*‘, onNewFile: function(id, file) { if(typeof FileReader !== "undefined") { var reader = new FileReader(); reader.onload = function(e) { $("#preview-user-idpic3").attr(‘src‘, e.target.result); } reader.readAsDataURL(file); } else { console.error("FileReader undefined"); } }, onUploadProgress: function(id, percent) {}, onUploadSuccess: function(id, data) { $("#user-idpic3").val("背面照片名称"); console.error(JSON.stringify(data)); }, onUploadError: function(id, message) {}, onFileTypeError: function(file) {}, onFileSizeError: function(file) {}, onFallbackMode: function(message) {} });}/** * ajax向手机发送验证码 * @param {Object} phone */function ajaxSendVerCode(phone) { var ajaxUrl = config.zbApi.postvercode; var parameter = { phone_num: phone, platform: getSys() }; $.ajax({ type: ‘post‘, async: true, url: ajaxUrl, dataType: ‘jsonp‘, data: parameter, jsonp: ‘callback‘, success: function(json) { // if(json.code == 0) { // console.error("验证码发送成功"); // } }, error: function() {} });}/** * ajax检测验证码的正确性 * @param {Object} phone * @param {Object} verCode */function ajaxCheckVerCode(phone, verCode) { var ajaxUrl = config.zbApi.checkvercode; var parameter = { phone_num: phone, code: verCode, platform: getSys() }; $.ajax({ type: ‘post‘, async: true, url: ajaxUrl, dataType: ‘jsonp‘, data: parameter, jsonp: ‘callback‘, success: function(json) { if(json.code == 0) { $("#ver-code-errormsg").html("").html("验证码正确").attr("color", "#000").show().fadeOut(4000); } else { $("#ver-code-errormsg").html("").html("验证码输入错误").show().fadeOut(4000); } }, error: function() {} });}/** * 本地正则检测验证码 * @param {Object} verCode */function checkVerCode(verCode) { if(verCode == null || verCode == undefined || verCode == "") { return false; } if(/^\d{4}$/.test(verCode)) { return true; } else { return false; }}/** *ajax获取银行列表 */function ajaxGetBankList() { var ajaxUrl = config.zbApi.getbacklist; var parameter = { platform: getSys() }; $.ajax({ type: ‘post‘, async: true, url: ajaxUrl, dataType: ‘jsonp‘, data: parameter, jsonp: ‘callback‘, success: function(json) { if(json.code == 0) { setBankList(json.data); } }, error: function() {} });}function setBankList(data) { var len = data.length; var bankListHtml = ""; for(var i = 0; i < len; i++) { bankListHtml += "<option value=http://www.mamicode.com/"" + data[i].id + "\">" + data[i].name + "</option>" } $(".bank-list").html("").append(bankListHtml);}/** * 倒计时 * @param {Object} timeDistance */function countDown() { if(verTimeDistance == 0) { verBtnCanClick = true; verTimeDistance = 59; window.clearInterval(verTimeObj); verTimeObj = null; $("#count-down").text("").hide(); return; } else if(verTimeDistance > 0) { $("#count-down").text("").text(verTimeDistance + "s").show(); verTimeDistance--; }}
= =模仿的这个写的。。可是很多东西看不懂。。。
表单上传数据，第一次写，很多地方不理解。。。写了个开头就写不下去了，希望有人能帮忙完善下。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。