表单上传数据，第一次写，很多地方不理解。。。写了个开头就写不下去了，希望有人能帮忙完善下。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单上传数据，第一次写，很多地方不理解。。。写了个开头就写不下去了，希望有人能帮忙完善下。相关的知识，希望对你有一定的参考价值。
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="css/reset.css" /> 9 <link rel="stylesheet" href="css/common.css" /> 10 <link rel="stylesheet" href="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="res/img/logo.png" alt="你的个人电视台"></a> 18 <ul class="header-nav"> 19 <li> 20 <a href="">广告平台</a> 21 </li> 22 <li> 23 <a href="">主播身价天梯</a> 24 </li> 25 <li> 26 <a target="_blank" href="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="">返回</a><span>此刻首页-个人中心</span> 34 <a href="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="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="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="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="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="js/utils.js"></script> 181 <script type="text/javascript" src="js/common.js"></script> 182 <script type="text/javascript" src="js/config.js"></script> 183 <script type="text/javascript" src="js/zbObj.js"></script> 184 <script type="text/javascript" src="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 == null || data == "" || data == 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 == null || data == "" || data == 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 == null || data == "" || data == 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 == null || data == "" || data == 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 == null || data == "" || data == 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 == null || data == "" || data == undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.uploadIdPic1Error.msg1); return false; } return true; } /** * 检测用户是否上传身份证正面照片 * @param {Object} data */ function checkIsUploadIdPic2(data) { if(data == null || data == "" || data == undefined) { showErrorMsg1(config.zbIdAuthErrorMsg.uploadIdPicw2Error.msg1); return false; } return true; } /** * 检测用户是否上传身份证背面照片 * @param {Object} data */ function checkIsUploadIdPic3(data) { if(data == null || data == "" || data == 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=\"" + 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--; } }
= =模仿的这个写的。。可是很多东西看不懂。。。
以上是关于表单上传数据，第一次写，很多地方不理解。。。写了个开头就写不下去了，希望有人能帮忙完善下。的主要内容，如果未能解决你的问题，请参考以下文章