Как сохранить файл на сервер нажатием кнопки в Javascript

Хорошо, поэтому я экспериментирую с HTML5 и сделал простое приложение «рисование» в Javascript, чтобы рисовать, где мышь пользователя находится на экране. Работает отлично.

Затем я хотел сохранить координаты в файл. В моей программе уже был массив координат x и массив координат y из кода Javascript.

Когда пользователь нажимает кнопку, onClick вызывает функцию в Javascript, которая использует jQuery, как в верхнем ответе здесь Как получить данные функции JavaScript в переменную PHP пытается передать это в файл php для сохранения.

Однако это не работает. Должен ли я передавать данные обратно в исходный php-документ, содержащий холст? Если да, то как мне заставить его делать код для сохранения, когда PHP запускается, когда документ загружается?

КОД:

Хорошо, это в исходном файле php, который содержит HTML для веб-страницы, включая холст. Вот соответствующая кнопка сохранения:

<button type="button" onclick="saveDrawing()" id="saveButton">Save</button>

Это вызывает следующее в отдельном файле JS

function saveDrawing(){
// First check that not drawing and have data
if (!readyToDraw && clickX!=null){  
    // If ready then pass back to the PHP file the data
    $url = 'file_save_test.php';
    $.get($url, {x_coords: getXCoords(), y_coords: getYCoords()});
    }
else {
    alert("Please add some coordinate points and press Finish before saving");
}
}

а file_save_test.php содержит только следующее

<?php

// retrieve data from the JS
$buffer_data['x_coords'] = $_GET['x_coords'];
$buffer_data['y_coords']  = $_GET['y_coords'];

$x_s = $_GET['x_coords'];
$y_s = $_GET['y_coords'];

// first want to open a file
$file_name = "data_test.txt";
$file_handler = fopen($file_name, 'w');

// now to loop through arrays and write!
/*for ($i = 0; $i < sizeof($x_s); i++){
    fwrite($file_handler, "$x_s[i], ");
    fwrite($file_handler, "$y_s[i]\n");
} */


fclose($file_handler);


?>

javascript php html file-writing
person Stuart Lacy    schedule 02.03.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В вашем файле PHP похоже, что ваш код fwrite закомментирован. Вы ожидаете, что он будет писать в этот data_test.txt файл? Попробуйте изменить файл PHP, чтобы распечатать результаты и отобразить их обратно в ваш javascript, чтобы убедиться, что данные передаются правильно.

$.get($url, {x_coords: getXCoords(), y_coords: getYCoords()},
    function(data){
        alert("Data Loaded: " + data);
    });

PHP

print_r($_GET);

ИЗМЕНИТЬ

Измените свой файл PHP на что-то вроде этого, если он правильно предупреждает данные (он должен добавить координаты в ваш файл):

<?php

// retrieve data from the JS
$x_s = $_GET['x_coords'];
$y_s = $_GET['y_coords'];

$file_name = "data_test.txt";
$file_handler = fopen($file_name, 'a');
fwrite($file_handler, "$x_s, $y_s \n");
fclose($file_handler);

?>

ИЗМЕНИТЬ 2

Обновите цикл for до исходного кода.

for ($i = 0; $i < count($x_s); $i++){
    fwrite($file_handler, $x_s[$i] . ", ". $y_s[$i] . "\n");
}
person Aaron W.    schedule 02.03.2012
comment
Предупреждение javascript правильно показало данные, так что это работает. Что это должно делать? print_r($_GET); Я поместил его в файл php, но не уверен, где посмотреть вывод - person Stuart Lacy; 03.03.2012
comment
Также у меня был закомментирован цикл fwrite, когда я тестировал только использование fwrite для одной строки, но это тоже не сработало. - person Stuart Lacy; 03.03.2012
comment
У меня нет текстового файла с таким именем, я использовал запись, чтобы попытаться создать новый файл. Я создал текстовый файл с таким именем вручную и попытался добавить в него данные, но он все еще не работал. - person Stuart Lacy; 03.03.2012
comment
Хорошо, я закомментировал весь свой код и просто добавил то, что вы добавили в свое первое редактирование, и я наконец-то записал его в текстовый файл! Я посмотрю позже, чтобы увидеть, что я сделал неправильно в своем коде. Однако вместо того, чтобы записывать значения массива в файл, он просто выводит Array, Array - person Stuart Lacy; 03.03.2012
comment
Попробуйте fwrite($file_handler, "X_COORDS:".print_r($x_s, true) . " Y_COORDS:". print_r($y_s,true)."\n");, так как я предполагаю, что вы передаете значения массива... или используйте исходный цикл for, который вы должны были написать, используя пример fwrite (см. редактирование) - person Aaron W.; 03.03.2012
comment
Ваш Edit 2 работает отлично, большое спасибо за помощь! - person Stuart Lacy; 03.03.2012
comment
Не знаю, увидите ли вы это, но сейчас возникли проблемы с сохранением этого stackoverflow.com/questions/9839435/ и интересно, почему вы использовали GET в своем ответе? Будет ли POST иметь большое значение? - person Stuart Lacy; 23.03.2012

arrow_upward
0
arrow_downward

Я бы сделал так, чтобы ваша кнопка сохранения вызывала метод jQuery $.post(). Отправьте данные в другой файл PHP, который либо вставит их в базу данных, либо сохранит в виде файла. Я не рекомендую использовать исходный документ для публикации данных, потому что клиенту придется загружать весь DOM, а сервер будет запускать любой другой код, который вам не нужен.

Это настолько, насколько я могу вам помочь, не видя вашего кода.

person HellaMad    schedule 02.03.2012
comment
Ах хорошо. Я думаю, что пытался это сделать, но с $.get(), а не с публикацией. Я включил свой код сейчас. Как видите, я пытаюсь опубликовать его в новом документе. - person Stuart Lacy; 03.03.2012

arrow_upward
0
arrow_downward

Я бы отправил данные в новый php-скрипт с именем saveCoords.php или что-то в этом роде.

Вы говорите, что у вас уже есть координаты в массиве JavaScript, поэтому это будет выглядеть примерно так...

//JAVASCRIPT FUNCTION which will request php file to store info
function storeCoords(xCoordArray, yCoordArray){
  var xCoords = JSON.stringify(xCoordArray);
  var yCoords = JSON.stringigy(yCoordArray);

  var request = new XMLttpRequest(); //will need to change for older ie 
  request.onreadystatechange = function(){
    //functions to handle returning information from php file..
  }

  request.open("GET","saveCoords.php?xCoords="+xCoords+"&yCoords="+yCoords, true);
  request.send();
}

И тогда файл saveCoords.php будет выглядеть примерно так:

<?php
  $xCoords = json_decode($_GET['xCoords']);
  $yCoords = json_decode($_GET['yCoords']);

  //now you have a php array of xCoords and yCoords, which you can store
?>

Это скелет, но я думаю, что он затрагивает основные моменты, но комментируйте любые вопросы.

person dano    schedule 02.03.2012
comment
Все в порядке. Что делают JSON.stringify() и json_decode()? Нужны ли они перед отправкой массива с помощью GET? - person Stuart Lacy; 03.03.2012