Question

我是AJAX的新手，我想问是否可以从＆＃34;文件输入＆＃34;中读取CSV文件。并从中提取数据并在同一页面中显示数据，而无需对表单进行汇总。这是我的代码：

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Choose a CSV File</title>
</head>
<body>
    <h1>Choose a CSV file :</h1>
    <form method="post" action="csv_to_array.php" enctype="multipart/form-data">
        <div>
            <input type="file" name="file" required/>
            <input type="submit" value="Upload CSV Data" />
        </div>
    </form>
    <div>
    <!-- diplaying the data extracted from the csv file -->
    </div>
</body>
</html>

csv_to_array.php：

<?php

if ($_FILES["file"]["error"] > 0) {
  echo "Error: " . $_FILES["file"]["error"] . "<br>";
} else {

    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Stored in: " . $_FILES["file"]["tmp_name"]. "<br>";

    $users = array();

    $labels = array('id', 'name', 'age');

    $fh = fopen ($_FILES["file"]["tmp_name"], 'r');
    fgetcsv($fh);

    if ($fh) {
        while (!feof($fh)) {
            $row = fgetcsv($fh, 500, ';');
            $tempRow = array();
            if (isset($row) && is_array($row) && count($row)>0) {
                foreach ($row as $key => $value) {
                    $tempRow[$labels[$key ]] = $value;
                }
                $users[] = $tempRow;
            }
        }
        fclose($fh);
        $numLines = count($users);
    }

    // I want this to be displayed in index.html :
    echo $numLines;
    echo '<table style="border: 1px solid black;">';
    echo '<tr>';
    echo '<td>ID</td>';
    echo '<td>NAME</td>';
    echo '<td>AGE</td>';
    echo '</tr>';
    for ($x=0; $x<$numLines; $x++) {
        echo '<tr>';
        echo '<td>'.$users[$x]['id'].'</td>';
        echo '<td>'.$users[$x]['name'].'</td>';
        echo '<td>'.$users[$x]['age'].'</td>';
        echo '</tr>';
    }
    echo '</table>';

}

?>

先谢谢你们！

Answer 1

有很多不同的方法可以做到这一点。我建议使用插件作为Blueimp jquery文件上传：https://github.com/blueimp/jQuery-File-Upload

为什么使用现有的插件更好：

安全性（我们在这里谈到上传文件，您需要考虑一些安全问题）
文件大小，格式等/上传时间
上传进度（进度条等）。
社区/支持

你可以做什么的例子：

1 - 文件上传（仅限CSV，最大10 MB ......）

    $('#importData').fileupload({
            dataType: 'json',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(csv)$/i,
            maxFileSize: 10000000 // 10 MB
            [...]
    }).on('fileuploadprogressall', function (e, data) {
            // You can manage your progress here
    }).on('fileuploaddone', function (e, data) {
            // You can now call your ajax file that will take care of the CSV (csv_to_array.php)
            (*)
    });

2 - 上传完成后（由上面代码中的'*'表示）

    $.ajax({ url: './ajax/csv_to_array.php', 
            data: {file_path:file.name, delete_url: file.deleteUrl},
            type: 'post',
            dataType: "json",
            beforeSend: function(xhr){xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");},
            success: function(dataCSVFile) {   
                            // Here in Jquery for example you can display your data
            });

3 - 请注意您的CSV php进程，我建议您添加许多不同的检查以确保用户将放置的文件的格式。（特别是如果您打算在数据库中保存数据）。

此致

Ajax - PHP：从CSV文件中提取数据而不提交

1 个答案: