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>
时间： 2024-08-23 21:42:17