HTML upload file using AJAX and PHP script - help?

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!

I don't think you can send files with a GET request, try POST. — Sam Dufel
– Sam Dufel, Commented Feb 18, 2011 at 15:31

h_45h · Accepted Answer · 2011-02-18 15:32:13Z

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

answered Feb 18, 2011 at 15:32

h_45h

1694 bronze badges

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

1 Comment

Turner Over a year ago

Thanks, I didn't realize (of course) that you couldn't send upload data with AJAX. Thanks!

SergeS · Accepted Answer · 2011-02-18 15:31:03Z

1

You cannot upload file via AJAX - only solution is iframe with form .

answered Feb 18, 2011 at 15:31

SergeS

11.9k3 gold badges31 silver badges35 bronze badges

Comments

Adeel · Accepted Answer · 2011-02-18 15:32:36Z

1

Uploading file through AJAX is not possible. It is not supported by XMLHttpRequest. you can either use flash, or using iframe as target.

answered Feb 18, 2011 at 15:32

Adeel

19.3k4 gold badges48 silver badges60 bronze badges

Comments

Marc B · Accepted Answer · 2011-02-18 15:33:01Z

1

Does your form have enctype="multipart/form-data"? File uploads must have attribute present in the <form> tag for the upload to work.

As well, you're not checking if the file upload succeeded on the server. At bare minimum you should have

if ($_FILES[$chart]['error'] === UPLOAD_ERR_OK) {
      ... upload worked, handle it...
}

answered Feb 18, 2011 at 15:33

Marc B

362k44 gold badges433 silver badges508 bronze badges

Comments

Dutchie432 · Accepted Answer · 2011-02-18 15:36:17Z

0

Do yourself a favor and use Uploadify (Requires jQuery). It will save you hours and hours of trying to figure out how to get your uploads to work in an AJAX-ish fashion.

answered Feb 18, 2011 at 15:36

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

1 Comment

Turner Over a year ago

After receiving some answers on here I was thinking about jQuery. Thanks for the answer, I'll see if I can use that

TNC · Accepted Answer · 2011-02-18 15:40:28Z

0

Something to check, is your form enctype="multipart/form-data" set? This would cause the image not uploading. Just an idea.

Also, is jQuery an option? If so, you could do something like this:

$.ajaxFileUpload({
        url:'addResult.php?type=' + queryString,
        secureuri:false,
        fileElementId: INPUTIDHERE,
        dataType: 'json',
        success: function (data, status)
        {
            // done - run some code
        },
        send: function(data)
        {
        },
        error: function (data, status, e)
        {
            console.debug(data);
        }
    }
)

Will need this library: http://jsfiddle.net/SYZqL/

edited Feb 18, 2011 at 15:40

answered Feb 18, 2011 at 15:33

TNC

5,3861 gold badge28 silver badges28 bronze badges

Comments

Ashok · Accepted Answer · 2014-06-16 12:04:23Z

you can upload the files via ajax to php script. The following should work for that.

var file_data = $("#file_field_id").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data)
form_data.append("user_id", 123) // adding additional form field values
$.ajax({
                url: "server.php",
                dataType: 'script',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         // Setting the data attribute of ajax with file_data
                type: 'post',
                success: function(data, textStatus, jqXHR){
                    if(data)
                     {
                        // some process


                },
                error:function(jqXHR, textStatus, errorThrown){
                alert("errorThrown"); 


        }
       });

Collectives™ on Stack Overflow

HTML upload file using AJAX and PHP script - help?

7 Answers 7

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related