PHP ajax uploading images

Question

I'm trying to do a file upload through ajax and php. The PHP works fine when called directly, but each time I call it through ajax it is failing. I'm not getting any errors (annoying) it just does not want to upload.

My JQUERY looks like

$('.fileUpload').on('click', function(){
        var file_data = $('#medical').prop('files')[0]; 
        console.log(file_data);  
            var form_data = new FormData();                  
            form_data.file = file_data;
            console.log(form_data); 
            var fileType = $(this).parent().find('input[type="hidden"]').val()
            console.log(fileType);                       
            $.ajax({
                        url: '/docs/upload.php', // point to server-side PHP script 
                        dataType: 'text',  // what to expect back from the PHP script, if anything
                        cache: false,
                        fileType:fileType,
                        contentType: false,
                        processData: false,
                        data: form_data,                         
                        type: 'post',
                        success: function(data){
                            $('.message').html(data) // display response from the PHP script, if any
                        }
             });
    });

and my PHP looks like

$file_upload="true";
$file_up_size=$_FILES['file_up'][size];
print_r($_FILES[file_up]);
if ($_FILES[file_up][size]>250000){$msg=$msg."Your uploaded file size is more than 250KB
 so please reduce the file size and then upload.<BR>";
$file_upload="false";}

$file_name=$_FILES[file_up][name];
$add="medicalPaperwork/$file_name"; // the path with the file name where the file will be stored

if($file_upload=="true"){

if(move_uploaded_file ($_FILES[file_up][tmp_name], $add)){
echo "Thank god!";
}else{echo "Fuck you.";}

}else{
echo $msg;
}

What am I doing wrong? I'm going crazy trying to figure this out.

edit: the content of the form_data

none, I'm just getting to the else in the move_uploaded_file if statement. No errors or feedback — zazvorniki, May 03 '16 at 02:14
Can you change `print_r($_FILES[file_up])` to `print_r($_FILES['file_up'])` as I don't see `file_up` defined anywhere. Or even better, just do `print_r($_FILES)` — Ali Hamze, May 03 '16 at 02:15
@AliHamze When called directy the php is working correctly. If the quotes are added around the file_up then it can't find it — zazvorniki, May 03 '16 at 02:17
see http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — user3791775, May 03 '16 at 02:18
@AliHamze If the php is called directly from the html then yes. If called through the ajax then no. — zazvorniki, May 03 '16 at 02:19
@user3791775 That has to do with form data in old browsers. I am using the latest chrome and safari. — zazvorniki, May 03 '16 at 02:20
Ok, so the issue is JS side. What is the content of `form_data`? — Ali Hamze, May 03 '16 at 02:20
First check your network tab in dev tools to see what you are sending — user3791775, May 03 '16 at 02:23
@AliHamze I just added a screenshot of what the form_data is coming back as — zazvorniki, May 03 '16 at 02:23
@user3791775 I have done that. All that is coming back is the else as stated above. I am sending what is stated in the ajax call. — zazvorniki, May 03 '16 at 02:25
Can you try using `form_data.append('file', file_data);` instead of `form_data.file = file_data;`? Also, try setting the content type using `beforeSend: function(xhr) { xhr.setRequestHeader('Content-Type', 'multipart/form-data'); }` — Ali Hamze, May 03 '16 at 02:27
No I mean what are you sending not what you are getting back: chrome-> network tab->headers and then check request headers and request payload — user3791775, May 03 '16 at 02:29
@AliHamze I have tried that. Then nothing is added to the file_data and it's not even getting to the success. — zazvorniki, May 03 '16 at 02:30
@user3791775 "------WebKitFormBoundarya1TKuno17uyRw4kI Content-Disposition: form-data; name="file"; filename="12715262_980543452013575_5855266490459355254_n.jpg" Content-Type: image/jpeg " — zazvorniki, May 03 '16 at 02:33
Did you also try setting the content type? I edited my last comment after I posted it. — Ali Hamze, May 03 '16 at 02:35
@AliHamze I just added it and it didn't seem to have any affect. — zazvorniki, May 03 '16 at 02:38
@user3791775 It comes back as an error because it does not know that$_POST is — zazvorniki, May 03 '16 at 02:39
then try it with a simple post (no file but a string : data: 'teststring' or something. If that doesn't reach your server that's the first thing you should fix — user3791775, May 03 '16 at 02:40
@user3791775 I know I am hitting the file because I am getting back the else in the move_uploaded_file — zazvorniki, May 03 '16 at 02:42
If var_dump($_POST); does not work it's a problem. It should output something. Or check your php error log — user3791775, May 03 '16 at 02:47

Musa · Answer 1 · 2016-05-03T02:44:57.373

You are using FormData incorrectly, use append to set the fields you want to upload

$('.fileUpload').on('click', function(){
    var file_data = $('#medical').prop('files')[0]; 
    console.log(file_data);  
    var form_data = new FormData();                  
    var fileType = $(this).parent().find('input[type="hidden"]').val()
    form_data.append('file_up', file_data);
    form_data.append('fileType', fileType);
    console.log(form_data); 
    console.log(fileType);                       
    $.ajax({
                url: '/docs/upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(data){
                    $('.message').html(data) // display response from the PHP script, if any
                }
     });
});

I have tried this. When changed then it does not even get to the else. — zazvorniki, May 03 '16 at 02:43

PHP ajax uploading images

1 Answers1