使用JSON的PHP上传返回到jQuery（全局）变量

Question

I need to take a CSV file from the client's machine and extract the data from it. I cannot save this CSV file, which is crucial (otherwise I would be laughing!). My PHP so far works like a charm:

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");
?>

Ignore the echo. It was just so I knew it was actually working. However, I've been using jQuery with this website and can't figure out the code to properly get the form to submit the file and retrieve the JSON data back (fileAsArray) at the same time. Here is my HTML/jquery in 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. :(
                }
            });
        });
    });

and 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>

I tried type="submit" as well, and a bunch of other things including just a 'form' tag and letting jQuery handle the POST... Thanks. If there is a better way to do this, please let me know :)

(I've been struggling with this for several days now... Having gone through many renditions of the code outlined below, I've stripped it down to its basics.)

Answer 1

If you want to upload CSV data through an Ajax post request, you must read the content of the file and insert it into the data: "don't know what goes here" field. Currently, only HTML5 browsers provides FileReader API that enables JavaScript to read the file, for Internet Explorer you must use a Flash-based solution.

I wrote a jQuery plug-in before that works with HTML5 browsers and jQuery. It would work with jQuery 1.4 - I am not sure about jQuery 1.5.