0

I'm trying to post some images and data to a PHP page, but I'm having difficulties getting it to work. It seems to me I am using the same method as mentioned in Uploading both data and files in one form using Ajax?, but I can't get it to work. The alert in the success function of UploadPictures() just returns a blank. Here's the relevant HTML:

<div class="UploadDeletePicturesDIV">
    <form id="UploadDeletePicturesFORM" method="post" enctype="multipart/form-data">
        <a class="Button" id="DeleteFrontPageGalleryButton" onClick="DeletePicture(document.getElementById('FrontPageGalleryPicture').src, 'frontpagegallery')">Verwijderen</a><br>
        <input type="file" id="UploadPictures" name="UploadPictures" multiple><br>
        <input type="hidden" name="Adapter" value="Pictures">
        <input type="hidden" name="Call" value="UploadPictures">
        <input type="hidden" name="PictureFolder" value="frontpagegallery">
        <a class="Button" id="UploadFrontPageGalleryButton" onClick="UploadFrontPageGalleryPictures()">Uploaden</a>
    </form>
</div>

The relevant javascript:

function UploadFrontPageGalleryPictures() {
    var form = $('#UploadDeletePicturesFORM');
    var filedata = new FormData();
    var i;
    jQuery.each($('#UploadPictures')[0].files, function(i, file) {
        filedata.append('Picture_'+i, file);
    });
    var other_data = form.serializeArray();
    $.each(other_data,function(key,input){
        filedata.append(input.name,input.value);
    });
    $.ajax({
        url: '/functions/functions.php',
        type: 'POST', 
        contentType: false,
        processData: false,
        data: filedata,
        success: function(data) {
            alert(data);
        },
        error: function(e) {
            alert(e);
        }
    }); 
}

And the relevant php:

<?php $pictures_basedir = "/home/deb95781/domains/blabla.com/public_html/images/";
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH']) ){
    if( $_POST['Adapter'] == 'Pictures' ){
        echo 'Adapter = ' . $_POST['Adapter'] . ' ';
        echo 'Call = ' . $_POST['Call'] . ' ';
        echo 'PictureFolder = ' . $_POST['PictureFolder'];
        if($_POST['Call'] == 'UploadPictures') {
            if(isset($_POST['PictureFolder'])) {
                global $pictures_basedir;
                $x = 0;
                echo "x: " . x;
                echo "name: " . $_FILES["Picture_" . $x]["name"];
                while($_FILES["Picture_" . $x]["name"] <> ""){
                    $target_dir = $pictures_basedir . $_POST['PictureFolder'] . '/' . basename( $_FILES["Picture_" . $x]["name"]);
                    $uploadOk = true;

                    if (file_exists($target_dir . $_FILES["Picture_" . $x]["name"])) {
                        echo "0___Sorry, foto " . $_FILES["Picture_" . $x]["name"] . " bestaat al./n";
                        $uploadOk = false;
                    }

                    if ($uploadOk) {
                        if (move_uploaded_file($_FILES["Picture_" . $x]["tmp_name"], $target_dir)) {
                            echo "1___Foto ". basename( $_FILES["Picture_" . $x]["name"]). " is geüpload./n";
                            //if it was an edit, remove the original file
                        } else {
                            echo "0___Sorry, er is iets foutgelopen bij het uploaden van foto " . $_FILES["Picture_" . $x]["name"] . "./n";
                        }
                    }

                    $x = $x+1;
                }
            }
        } 
    }
} ?>

I first tried without adding the hidden inputs to the FormData() object by just using 

data: 'Adapter=Pictures&Call=UploadPictures&PictureFolder=frontpagegallery&' + filedata,

But that wasn't a great success which is why I added everything to the form.

Community
  • 1
  • 1
Mats Raemen
  • 1,781
  • 1
  • 28
  • 41
  • I think you're overthinking it. `data: new FormData(form[0])` should be enough, you don't have to do all that looping and such. – Kevin B Jul 27 '15 at 19:39
  • This topic should help: http://stackoverflow.com/questions/11046684/php-file-upload-using-jquery-post – CarlosCarucce Jul 27 '15 at 19:40
  • And then I should get the files by getting $_FILES['UploadPictures']['name'] instead? – Mats Raemen Jul 27 '15 at 19:50
  • If the alert shows nothing, the PHP script isn't outputting anything. Check your PHP conditions, one of them is probably failing. – adeneo Jul 27 '15 at 19:53
  • the PHP code is in the post as well, do you see anything that could cause it not to return anything? Adapter=Pictures is added to the formdata, as well as Call=UploadPictures. I am clueless. – Mats Raemen Jul 28 '15 at 07:39

0 Answers0