Отображение нескольких таблиц CSV-файлов из сохраненных в локальной папке по одному

Question

Отображение нескольких таблиц CSV-файлов из сохраненных в локальной папке по одному

Я храню файлы CSV в локальной папке. И я отображаю имена файлов в локальной папке в виде списка на внешнем интерфейсе динамически.

СПИСОК ИМЯ ФАЙЛА

$path = "uploads/";
$files = scandir($path);
foreach($files as $file) {
if ($file[0] != '.') $nothidden[] = $file;
}

for ($x=0;$x<count($nothidden);$x++){
?><li class="active"><a><?php ${'file'.$x} = $nothidden[$x]; echo $nothidden[$x]; ?></a></li><br/>
<?php
}

Я могу отображать CSV-файл в табличной форме по одному статически.

CSV FILE TABLE

$value = 'file.csv';
$target='uploads/'.basename($value);
echo "<table id='toggle-vis'>\n\n";
$f = fopen($target, "r");
while (($line = fgetcsv($f)) !== false) {
echo "<tr>";
foreach ($line as $cell) {
echo "<td>" . htmlspecialchars($cell) . "</td>";
}
echo "</tr>\n";
}
fclose($f);
echo "\n</table>"

То, что я хочу, это отобразить таблицу CSV-файла из локального каталога при нажатии на конкретное имя файла в отображаемом списке. И если щелкнуть другое имя файла в списке, предыдущая таблица должна быть удалена, а данные из выбранного файла должны заполнить таблицу.
Любая помощь, пожалуйста?

0

csv php

Решение

Другие решения

Следование коду может вам помочь.

var csvData;
$(document).ready(function() {
$("#btnGET").click(function() {
csvData = $.ajax({
type: "GET",
url: "<csv file path>",
dataType: "text/csv",
success: function (result) {
alert(result);
alert("done!"+ csvData.getAllResponseHeaders())
}
});
});
});

0

Источник

Accepted Answer

Это очень быстро написанный пример — он работает для меня в качестве теста, но вам нужно будет внимательно изучить его, чтобы внести соответствующие изменения в соответствии с вашими конечными потребностями и средой.

Функция AJAX вызывается, когда a в списке нажимается. Код смотрит на event и использует event.target перехватить innerHTML для a — это имя файла, отправляемое в качестве параметра (через ajax) в скрипт php. PHP-скрипт проверяет, что метод POST и что в массиве POST есть имя файла — если все в порядке, то обработает этот файл и отправит обратно данные csv. Это можно отредактировать так, чтобы отправлялось только имя файла, а не полный путь к файлу, чтобы пользователи не знали фактических путей к файлам, используемых в вашей системе!

<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['filename'] ) ){

$filename=filter_input( INPUT_POST, 'filename', FILTER_SANITIZE_STRING );

if( $filename && realpath( $filename ) ){
ob_clean();

$hndl=fopen( $filename, 'r' );
$html=array();

$html[]="<table id='toggle-vis'>";
while ( ( $line = fgetcsv( $hndl ) ) !== false ){
$html[]="<tr>";
foreach( $line as $cell )$html[]="<td>$cell</td>";
$html[]="</tr>";
}
$html[]="</table>";

fclose( $hndl );

header( 'Content-Type: text/html' );
exit( implode( PHP_EOL, $html ) );
}
}
?>
<!doctype html>
<html>
<head>
<title>csv manipulations</title>
<script>
/*
basic ajax function
*/
function ajax(m,u,p,c,o){
/*
Method,Url,Params,Callback,Options
*/
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() );
};

var params=[];
for( var n in p )params.push( n+'='+p[ n ] );

switch( m.toLowerCase() ){
case 'post': p=params.join('&'); break;
case 'get': u+='?'+params.join('&'); p=null; break;
}

xhr.open( m.toUpperCase(), u, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( p );
}

/*
event handler assigned to each `a` within the list ( li.active > a )
*/
function getcsvdata(e){
try{
e.preventDefault();

var method='post';
var url=location.href;
var params={
filename:e.target.innerHTML
};
var callback=csvcallback;
var options={};

ajax.call( this, method, url, params, callback, options );

}catch( err ){
console.warn( err );
}
}

/*
ajax callback to process the response from the php script at the top
*/
function csvcallback( data ){
try{

var table=document.getElementById('toggle-vis');
if( table ){
var parent=table.parentNode;
parent.removeChild( table );

parent.insertAdjacentHTML('beforeend',data);
}
}catch( err ){
console.warn( err );
}
}/*
Bind event handlers to each `a` in list
*/
document.addEventListener('DOMContentLoaded',function(){
var col=Array.prototype.slice.call( document.querySelectorAll('li.active > a') );
col.forEach(function(e){
e.addEventListener('click',getcsvdata,false);
});
}, false );
</script>
</head>
<body>
<h1>CSV Files</h1>
<ul id='list'>
<?php

/* edit to suit */
$dir='c:/temp2/csvfiles';$col=glob( $dir . '/*.csv' );
if( !empty( $col ) ){
foreach( $col as $file ){
echo "<li class='active'><a href='#'>$file</a></li>";
}
}
?>
</ul>
<table id='toggle-vis'>
<tr>
<td>csv data to appear here when links clicked</td>
</tr>
</table>
</body>
</html>

0