Загрузка PHP с возвращением JSON в переменную jQuery (глобальную)

Question

Мне нужно взять файл CSV с компьютера клиента и извлечь из него данные. Я не могу сохранить этот CSV-файл, что очень важно (иначе я бы посмеялся!). Мой PHP пока работает как шарм:

upload.php

<?php
    $file = $_FILES['file'];
    if ($file['error'] === UPLOAD_ERR_OK) {
        $ext = substr($file["name"], strrpos($file["name"], '.') + 1);
        $maxSize = 3000000;

        //Check file extension, MIME-type and size limit (3 MB).
        if ($ext == "csv") {
            if ($file["type"] == "text/csv" ||
                $file["type"] == "text/comma-separated-values") {

                if ($file["size"] < $maxSize) {
                    //CSV -> JSON
                    $fileAsArray = Array();

                    if (($handle = fopen($file["tmp_name"], "r")) !== FALSE) {
                        while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
                            $fileAsArray[] = $data;
                            }
                                fclose($handle);
                            }
                            echo json_encode($fileAsArray);
                            die(json_encode($fileAsArray));
                    }
                    else {
                        echo "File size: ".$file["size"]."bytes<br>Limit: ".$maxSize." (3MB)";
                    }
                }
                else {
                    echo "MIME-type: ".$file["type"]."<br>Required: text/csv";
                }
            }
            else {
                echo "File Extension: ".$ext."<br>Required: csv";
            }
        }
        else
            die("Cannot upload");
?>

Игнорировать эхо. Просто я знал, что это на самом деле работает. Однако я использовал jQuery на этом веб-сайте и не могу понять, как правильно получить форму для отправки файла и получения данных JSON (fileAsArray) одновременно. Вот мой HTML / JQuery в index.html:

<script type="text/javascript">
    var csvData = {}; //My global variable (two-dimensional JSON array)

    $(document).ready(function(){
        $("#upload").click(function(){
            alert('test');

            $.ajax({
                type: "POST",
                url: "upload.php",
                data: "don't know what goes here",
                dataType: "json",
                success: function (data) {
                    alert(data); //Tried everything here too. :(
                }
            });
        });
    });

и HTML:

<form method="POST" action="upload.php" enctype="multipart/form-data" class="file_upload">
    <input id="getFile" type="file" name="file">
    <input value="Extract Data" id="upload" type="button">
</form>

Я тоже попробовал type="submit" и кучу других вещей, включая просто тег 'form' и разрешение jQuery обрабатывать POST ... Спасибо. Если есть лучший способ сделать это, пожалуйста, дайте мне знать:)

(Я боролся с этим уже несколько дней ... Пройдя много версий кода, описанного ниже, я разобрал его до его основ.)

Answer 1

Если вы хотите загрузить данные CSV с помощью пост-запроса Ajax, вы должны прочитать содержимое файла и вставить его в поле data: "don't know what goes here". В настоящее время только браузеры HTML5 предоставляют FileReader API, который позволяет JavaScript для чтения файла, для Internet Explorer вы должны использовать решение на основе Flash.

Я написал плагин jQuery , который до этого работал с браузерами HTML5 и jQuery. Это будет работать с jQuery 1.4 - я не уверен насчет jQuery 1.5.