How to Link PHP Script with JavaScript and Bootstrap

Question

I am trying to take a CSV file from the client side and read it in order to create arrays that can then be used in my original html file, that contains javascript, to create a dynamic table. My PHP code for parsing into arrays is:

<php?
$csvData = file_get_contents($fileName);
$lines = explode(PHP_EOL, $csvData);
$array = array();
foreach ($lines as $line) {
    $array[] = str_getcsv($line);
}
print_r($array);
?>

And my HTML (a simple file upload) is:

<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload CSV" name="submit">

but I am unsure as to how I should connect these pieces? Can the PHP script be in the same document as the HTML(which contains the JS to construct the table), or should it be called through a form?

Reagan Gallant · Accepted Answer · 2015-07-24 18:55:04Z

1

Save your php script in a file eg. upload.php. Then use the following code in your html:

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload">
    <input type="submit" value="Upload CSV" name="submit">
</form>

edited Jul 24, 2015 at 18:55

answered Jul 24, 2015 at 18:34

Reagan Gallant

8638 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Coleen Over a year ago

And to access the arrays built, can i simply use a json function? And how would the user return to the original page without losing php data from the file?

Reagan Gallant Over a year ago

You can ajax to post the file . The you don't need to worry about redirecting. The content can be access by using the name file element eg. "fileToUpload". You can test it print_r($_FILES['fileToUpload']);

Coleen Over a year ago

Thanks so much for all the help!

bjelleklang · Accepted Answer · 2015-07-24 18:59:31Z

0

The easiest way to output the csv based on Reagan Gallant's suggestion above, is to print the data directly from upload.php. You can also add a header saying that you're serving csv, and let the browser decide what to do (save as file, display in browser):

header('Content-Type: text/csv'); print $csv;

Or you can use a javascript library such as JQuery to upload the file and return the result using ajax. This requires a little bit extra coding, but depending on your goal it might be worthwhile.

answered Jul 24, 2015 at 18:59

bjelleklang

4963 gold badges8 silver badges28 bronze badges

2 Comments

bjelleklang Over a year ago

The header/print statement would be inserted into upload.php, and is used at the end. Keep in mind that the call to header must be the first output from the script, otherwise the call will fail. See php.net/manual/en/function.header.php for more information.

Coleen Over a year ago

Thanks so much, I'll check that out!

Collectives™ on Stack Overflow

How to Link PHP Script with JavaScript and Bootstrap

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related