标签：
1,实现效果截图
2，A.php上传CSV文件表单
2-1：html结构使用jqeury.form.min.js表单框架异步提交
1 <div class="uploadFile border_bg"> 2 <form action="" method="post" id="formToUpdate"> 3 <div class="form-group"> 4 <label ><strong>Import from csv</strong></label> 5 <input type="file" name="uploadCSV" id="upCsv"> 6 <input id="ajaxSubmit" type="button" value="upload CSV" class="btn"> 7 </div> 8 9 </form> 10 11 </div>
2-2：JavaScript，在上传前判断是否是csv文件，否：禁止提交，提交完成后，在当前页面显示响应数据
1 <script type="text/javascript" language="javascript"> 2 3 jQuery(function(){ 4 jQuery("#ajaxSubmit").on("click",function(e){ 5 //console.log(jQuery(this)); 6 var file=jQuery(‘#upCsv‘).val(); 7 var fileArr=file.split(‘.‘); 8 if((fileArr[fileArr.length-1]) !== ‘csv‘){ 9 alert("please upload CSV file!") 10 preventDefault(e); 11 }else{ 12 jQuery("#formToUpdate").ajaxSubmit({ 13 type:‘post‘, 14 url:‘index.php?option=com_gnverification&view=doajax&layout=show‘, 15 success:function(data){ 16 document.write(data); 17 }, 18 error:function(XmlHttpRequest,textStatus,errorThrown){ 19 console.log(XmlHttpRequest); 20 console.log(textStatus); 21 console.log(errorThrown); 22 } 23 }); 24 } 25 26 }); 27 }); 28 function preventDefault(e){ 29 e=e || window.event; 30 if(document.all){ 31 e.returnValue=false; 32 }else{ 33 e.preventDefault(); 34 } 35 } 36 37 38 </script>
3，B.php：接收csv文件，读取其中的数据，存入数组
3-1：html与php配合实现数据在表单显示
1 <?php 2 3 4 5 defined(‘_JEXEC‘) or die; 6 7 //joomla 获取CSV文件 8 $cvs=JRequest::getVar(‘uploadCSV‘,‘‘,‘files‘); 9 //读取CSV文件数据，并存入数组 10 function csv_get_lines($csvfile, $lines, $offset = 0) { 11 if(!$fp = fopen($csvfile, ‘r‘)) { 12 return false; 13 } 14 $i = $j = 0; 15 while (false !== ($line = fgets($fp))) { 16 if($i++ < $offset) { 17 continue; 18 } 19 break; 20 } 21 $data = array(); 22 while(($j++ < $lines) && !feof($fp)) { 23 $data[] = fgetcsv($fp); 24 } 25 fclose($fp); 26 return $data; 27 } 28 //如果已经上传文件，就读取csv文件，并显示在表单中 29 if(isset($cvs)){ 30 unset($arrData); 31 $arrData=csv_get_lines($cvs[‘tmp_name‘],20,0); 32 33 ?> 34 <style> 35 .form-inline{ margin-bottom: 15px;} 36 .form-inline .form-group{display: inline-block; 37 margin-bottom: 0; 38 vertical-align: middle; 39 margin-right: 10px; 40 } 41 .form-group label{ display: inline-block; 42 max-width: 100%; 43 margin-bottom: 5px; 44 font-weight: 700; 45 46 } 47 </style> 48 <form action="index.php?option=com_gnverification&view=addallcode&layout=updataall" method="post" id="upForm"> 49 <?php foreach($arrData as $key=>$val){ 50 if($val[1] || $val[2]){ 51 ?> 52 53 <div class="form-inline"> 54 <div class="form-group"> 55 <label>number:</label><input type="text" value="<?php echo $val[0] ?>" name="data<?php echo $key;?>[]" class="form-control inputbox"> 56 </div> 57 <div class="form-group"> 58 <label>Code:</label> <input type="text" value="<?php echo $val[1] ?>" name="data<?php echo $key;?>[]" class="form-control inputbox code"> 59 </div> 60 <div class="form-group"> 61 <label>Model:</label><input type="text" value="<?php echo $val[2] ?>" name="data<?php echo $key;?>[]" class="form-control inputbox model"> 62 </div> 63 </div> 64 65 <?php 66 } 67 }?> 68 <div class="updata"> 69 <input type="submit" class="btn" id="submitData"> 70 </div> 71 </form> 72 <?php }?>
3-2：JavaScript对将要提交的表单进行码的验证，通过即可提交，不通过就以红星显示不符规则的数据，可进行修改过后在提交
1 <script> 2 var submitData =document.getElementById(‘submitData‘); 3 submitData.addEventListener(‘click‘,function(e){ 4 //不符合，禁止提交 5 if(!checkCode()){ 6 preventDefault(e); 7 } 8 }); 9 //检查码是否符合规则，符合返回真，不符合返回假 10 function checkCode(){ 11 var objList=document.getElementsByClassName(‘code‘); 12 var upForm=document.getElementById(‘upForm‘); 13 var flag; 14 for(var i=0;i<objList.length;i++){ 15 //不符合code规则则设置flag为true,同时设置那个不符合code提示; 16 if(!/^[a-zA-Z]{2}[a-zA-Z0-9]{3}[0-9]{7}$/.test(objList[i].value)){ 17 if(!objList[i].parentNode.getElementsByTagName(‘span‘).length){ 18 var span =newSpan(); 19 objList[i].parentNode.appendChild(span); 20 } 21 }else{ 22 var span=objList[i].parentNode.getElementsByTagName(‘span‘); 23 if(span.length){ 24 objList[i].parentNode.removeChild(span); 25 } 26 } 27 } 28 if(upForm.getElementsByTagName(‘span‘).length>0){ 29 flag =false; 30 }else{ 31 flag =true; 32 } 33 return flag; 34 } 35 //创建span标签 36 function newSpan(){ 37 var spanTip=document.createElement(‘span‘); 38 spanTip.innerHTML=‘*‘; 39 spanTip.style.color=‘red‘; 40 return spanTip; 41 } 42 //阻止表单提交 43 function preventDefault(e){ 44 e=e || window.event; 45 if(document.all){ 46 e.returnValue=false; 47 }else{ 48 e.preventDefault(); 49 } 50 } 51 52 </script>
4,C.php提交成功后，在此页面显示已添加数据
1 <?php 2 3 4 5 defined(‘_JEXEC‘) or die; 6 7 ?> 8 <table class="table table-hover" style="width: 600px;"> 9 <caption>These codes have been added!</caption> 10 <tr> 11 <th><strong>Number</strong></th> 12 <th><strong>Code</strong></th> 13 <th><strong>Model</strong></th> 14 </tr> 15 <?php 16 foreach($this->saveArr as $key=>$val){ 17 ?> 18 <tr> 19 <td><?php echo $key;?></td> 20 <td><?php echo $val[1];?></td> 21 <td><?php echo $val[2];?></td> 22 </tr> 23 <?php 24 } 25 ?> 26 <tr> 27 <td align="right" colspan="4"><a href="<?php echo JRoute::_(‘index.php?option=com_gnverification&view=gnverifications‘); ?>" class="btn">返回</a> </td> 28 </tr> 29 </table>
使用joomla通过CSV文件上传数据存入数据库并使用JavaScript验证码是否符合规则
标签：
原文地址：http://www.cnblogs.com/liangsongbai/p/4882938.html
