Question

I am trying to perform a task that may not be possible. I haven’t found the same scenario yet around the internet.

I have four fields that, on a click, will call a Javascript function that does an AJAX call for data from a PHP file.

The fields will ultimately be filling a row in a database and the PHP will query the new set of data, and the user will see it. Part of the data is an image that the user can click on and expand.

The AJAX call works, the expanding image works, but adding this image via an upload does not, thus breaking the whole thing.

Here is a snippet of the HTML form:

Entry: <input type='text' id='entry' />
Stop: <input type='text' id='stop' />
Final: <input type='text' id='final' />
Chart: <input type='file' id='chart' value='Get Chart'/>
<input type='button' onclick='addResult()' value='Add' />

The addResult() processes things like this:

var entry = document.getElementById('entry').value;
var stop = document.getElementById('stop').value;
var final = document.getElementById('final').value;
var chart = document.getElementById('chart').value;
var queryString = "?entry=" + entry + "&stop=" + stop + "&final=" + final + "&chart=" + chart + "&loggedIn=true";
ajaxRequest.open("GET", "addResult.php" + queryString, true);

Nothing special, just taking the data and sending it to addResult.php for a response. Here is the process for handling the ‘chart’ upload data in addResult.php:

$chart = $_GET['chart'];
$chart_loc = "../img/".basename($_FILES[$chart]['name']);
move_uploaded_file($_FILES[$chart]['tmp_name'], $chart_loc);
if(($entry != "") && ($stop != "") && ($final != "") && ($chart_loc != "")){
           mysql_query("INSERT INTO resultsMod VALUES (now(),'".$entry."','".$stop."','".$final."','".$chart_loc."')") or die(mysql_error());
        }

When I click the ‘Add’ button, it does nothing, and before I added the upload file field, everything was working fine. So I must be doing something wrong with handling the file.

I’ve never worked with upload data before, so I don’t know if sending that data like that is even allowed (without a form submission and just passing the file data through Javascript to a php file).
I also may be doing something incorrect with the move_uploaded_file function.

The goal of course is to have a real time update of the new data from the form, including the uploaded image. (I know my code is simple and I will add to it once this is functional)
Any help is appreciated, thanks!

Answer 1

You are trying to upload a file using AJAX, which is not posible. The best approach would be to manage the file upload separately, maybe through swf-upload