使用joomla通过CSV文件上传数据存入数据库并使用JavaScript验证码是否符合规则

1,实现效果截图

2，A.php上传CSV文件表单

　　2-1：html结构使用jqeury.form.min.js表单框架异步提交

 <div class="uploadFile border_bg">
     <form action="" method="post" id="formToUpdate">
         <div class="form-group">
             <label ><strong>Import from csv</strong></label>
             <input type="file" name="uploadCSV" id="upCsv">
             <input id="ajaxSubmit" type="button" value="upload CSV" class="btn">
         </div>

     </form>

 </div>

　　2-2：JavaScript，在上传前判断是否是csv文件，否：禁止提交，提交完成后，在当前页面显示响应数据

 <script type="text/javascript" language="javascript">

     jQuery(function(){
         jQuery("#ajaxSubmit").on("click",function(e){
             //console.log(jQuery(this));
             var file=jQuery('#upCsv').val();
             var fileArr=file.split('.');
             if((fileArr[fileArr.length-1]) !== 'csv'){
                 alert("please upload CSV file!")
                 preventDefault(e);
             }else{
                 jQuery("#formToUpdate").ajaxSubmit({
                     type:'post',
                     url:'index.php?option=com_gnverification&view=doajax&layout=show',
                     success:function(data){
                         document.write(data);
                     },
                     error:function(XmlHttpRequest,textStatus,errorThrown){
                         console.log(XmlHttpRequest);
                         console.log(textStatus);
                         console.log(errorThrown);
                     }
                 });
             }

         });
     });
     function preventDefault(e){
         e=e || window.event;
         if(document.all){
             e.returnValue=false;
         }else{
             e.preventDefault();
         }
     }

 </script>

3，B.php：接收csv文件，读取其中的数据，存入数组

　　3-1：html与php配合实现数据在表单显示

 <?php

 defined('_JEXEC') or die;

     //joomla 获取CSV文件
     $cvs=JRequest::getVar('uploadCSV','','files');
     //读取CSV文件数据，并存入数组
     function csv_get_lines($csvfile, $lines, $offset = 0) {
         if(!$fp = fopen($csvfile, 'r')) {
             return false;
         }
         $i = $j = 0;
         while (false !== ($line = fgets($fp))) {
             if($i++ < $offset) {
                 continue;
             }
             break;
         }
         $data = array();
         while(($j++ < $lines) && !feof($fp)) {
             $data[] = fgetcsv($fp);
         }
         fclose($fp);
         return $data;
     }
     //如果已经上传文件，就读取csv文件，并显示在表单中
     if(isset($cvs)){
         unset($arrData);
         $arrData=csv_get_lines($cvs['tmp_name'],20,0);

     ?>
     <style>
         .form-inline{ margin-bottom: 15px;}
         .form-inline .form-group{display: inline-block;
             margin-bottom: 0;
             vertical-align: middle;
             margin-right: 10px;
         }
         .form-group label{    display: inline-block;
             max-width: 100%;
             margin-bottom: 5px;
             font-weight: 700;

         }
     </style>
     <form action="index.php?option=com_gnverification&view=addallcode&layout=updataall" method="post" id="upForm">
     <?php foreach($arrData as $key=>$val){
             if($val[1] || $val[2]){
         ?>

        <div class="form-inline">
             <div class="form-group">
                 <label>number:</label><input type="text" value="<?php echo $val[0] ?>" name="data<?php echo $key;?>[]" class="form-control inputbox">
             </div>
             <div class="form-group">
                 <label>Code:</label> <input type="text" value="<?php echo $val[1] ?>" name="data<?php echo $key;?>[]" class="form-control inputbox code">
             </div>
             <div class="form-group">
                 <label>Model:</label><input type="text" value="<?php echo $val[2] ?>" name="data<?php echo $key;?>[]" class="form-control inputbox model">
             </div>
        </div>

     <?php
             }
             }?>
         <div class="updata">
             <input type="submit" class="btn" id="submitData">
         </div>
     </form>
 <?php }?>

　　3-2：JavaScript对将要提交的表单进行码的验证，通过即可提交，不通过就以红星显示不符规则的数据，可进行修改过后在提交

     <script>
         var submitData =document.getElementById('submitData');
         submitData.addEventListener('click',function(e){
             //不符合，禁止提交
             if(!checkCode()){
                 preventDefault(e);
             }
         });
         //检查码是否符合规则，符合返回真，不符合返回假
         function checkCode(){
             var objList=document.getElementsByClassName('code');
             var upForm=document.getElementById('upForm');
             var flag;
             for(var i=0;i<objList.length;i++){
                 //不符合code规则则设置flag为true,同时设置那个不符合code提示;
                 if(!/^[a-zA-Z]{2}[a-zA-Z0-9]{3}[0-9]{7}$/.test(objList[i].value)){
                     if(!objList[i].parentNode.getElementsByTagName('span').length){
                         var span =newSpan();
                         objList[i].parentNode.appendChild(span);
                     }
                 }else{
                     var span=objList[i].parentNode.getElementsByTagName('span');
                   if(span.length){
                       objList[i].parentNode.removeChild(span);
                    }
                 }
             }
             if(upForm.getElementsByTagName('span').length>0){
                 flag =false;
             }else{
                 flag =true;
             }
             return flag;
         }
         //创建span标签
         function newSpan(){
             var spanTip=document.createElement('span');
             spanTip.innerHTML='*';
             spanTip.style.color='red';
             return spanTip;
         }
         //阻止表单提交
         function preventDefault(e){
             e=e || window.event;
             if(document.all){
                 e.returnValue=false;
             }else{
                 e.preventDefault();
             }
         }

     </script>

4,C.php提交成功后，在此页面显示已添加数据

 <?php

 defined('_JEXEC') or die;

 ?>
 <table class="table table-hover"  style="width: 600px;">
     <caption>These codes have been added!</caption>
     <tr>
         <th><strong>Number</strong></th>
         <th><strong>Code</strong></th>
         <th><strong>Model</strong></th>
     </tr>
     <?php
         foreach($this->saveArr as $key=>$val){
     ?>
     <tr>
         <td><?php echo $key;?></td>
         <td><?php echo $val[1];?></td>
         <td><?php echo $val[2];?></td>
     </tr>
     <?php
     }
     ?>
     <tr>
         <td align="right" colspan="4"><a href="<?php echo JRoute::_('index.php?option=com_gnverification&view=gnverifications'); ?>" class="btn">返回</a> </td>
     </tr>
 </table>