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>