0

I have a form where uses are allowed to upload multiple images, which then are attached to the gallery div for display prior submission of the form. My problem now is that my upload script is not picking up on the handed over attachment variables (neither via POST or GET) since the upload script is expecting the files to be submitted as $_FILES[] variables. How can I pass my attachments to AJAX and send them over to the PHP script in a way that it picks them up?

HTML + JS

<div>
    <font>Attachments (.jpg, .png, .bmp):</font>
    <input name="file" id="file" type="file" accept="image/*" multiple />
    <p class="help-block">Max. filesize 5MB</p>
</div>

<script type="text/javascript" language="javascript"> 
$(function () {
    $("#file").change(function (e) {                                            
        e.preventDefault();

        var new_img = new FormData(document.getElementById("file"));
        new_img.append("label", "new_mod_gallery");

        $.ajax({
            url: "./templates/upload.php",
            type: "POST",
            enctype: 'multipart/form-data',
            data: new_img,
            processData: false,
            contentType: false,
            cache: false,

            success: function(data) {
                console.log(data);
                $("#lightBoxGallery").load(location.href + " #lightBoxGallery");
            },
        });
    });
});
</script>

upload.php

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

if (isset($_POST['label']) && $_POST['label']=='new_mod_gallery') {

    // check if any attachments have been selected
    if(count($_FILES['file']['name']) > 0) {
// do the upload
    } else  {   
        echo "No upload files submitted.";
        die(); 
            }

} else { echo "No data received."; }

?>

EDIT: adjusted the JS to include the encodetype as well adjusted the processType and dataType to false as required.

To the poster who flagged this as a duplicate, it is not. My question is how to submit a file upload request via AJAX to PHP and have PHP pick-up the variable as $_FILES[], as opposed to the subject of "How can I upload a file via jquery AJAX" which the linked post is dealing with.

Armitage2k
  • 1,164
  • 2
  • 27
  • 59
  • 1
    The element has been deprecated since 1999 - don't use it, use styling instead. Since you are not using a form then you need to set the heading type to 'multipart/form-data' in the jQuery ajax call. –  Nov 06 '16 at 02:57
  • @jeff followed your recommendation and adjusted the ajax call, still, cant seem to get the files through... – Armitage2k Nov 06 '16 at 03:26
  • What issue are you having that cannot be resolved using approaches at linked Question? – guest271314 Nov 06 '16 at 03:28
  • @jeff the php script is not picking up on the submitted files, neither via GET or POST protocol. When counting in my upload.php handler how many files have been received, it always counts zero files, quoting an undefined index 'file' which is the input id for the uploaded files. the linked question deals with how to address a general upload with jquery instead of iframes, and all depend on actual form submission, as opposed to my script where I use the on.change event. – Armitage2k Nov 06 '16 at 03:33
  • No `
    ` or element having `id` `upload` appears at `html` at Question?
     – guest271314 Nov 06 '16 at 03:38
  • @guest271314 just saw that and adjusted, still the same problem. – Armitage2k Nov 06 '16 at 03:39
  • [`FormData()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) constructor expects a `
    ` element. `enctype` is not a listed [`$.ajax()`](http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings) setting at documentation.
     – guest271314 Nov 06 '16 at 03:40
  • @guest271314 can this be circumvented via eg `data: { upload:$(this).val()},` ? I tried and still cant get through. Is a form element absolutely necessary or can this be done without using FormData()? – Armitage2k Nov 06 '16 at 03:44
  • Yes, can be achieved without using `FormData()`, see [Upload multiple image using AJAX, PHP and jQuery](http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery). Though you can adjust existing `javascript` to achieve expected result. `$(this).val()` does not get `.files` property of `` element. – guest271314 Nov 06 '16 at 03:46
  • thanks for your help guys, but nevermind. this whole thing is by far too messy, hence am using [this jQuery upload plugin](https://github.com/blueimp/jQuery-File-Upload) now. – Armitage2k Nov 06 '16 at 05:02
  • please select the form by id as shown in the below code `var new_img = new FormData(document.getElementById("file_upload"));` and enclose your input tag in form tag as shown below code `
    `     – pankaj goyal Nov 06 '16 at 05:57

0 Answers0