これは非常に迅速に書かれた例である - それはテストとして私のために動作しますが、あなたの最終的なニーズや環境に合わせて、適切な編集を行うために慎重にそれを見てする必要があります。
ajax関数は、リスト内のaがクリックされたときに呼び出されます。コードはeventを見てevent.targetを使用して、aのinnerHTMLを傍受します。これは、パラメータとして（ajax経由で）phpスクリプトに送信されるファイル名です。 PHPスクリプトは、メソッドがPOSTであることをチェックし、POST配列にファイル名があることを確認します。OKであれば、そのファイルを処理して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>
あなたはそれをCSV形式の権利の内容を一覧表示しますcsvファイルをクリックすると言って意味 – RamRaider
ファイルを読み取り、CSVファイルからデータを返す、要求を処理するための要求とPHPを送信するために、AJAXを使用する必要があります –
@RamRaiderあなたはそれをどうやって正確に説明することができますか、私はそれでいくつかのコードを試しましたが、最終的には固まっていました。 –