Plain JS XMLHttpRequest naar PHP met input[type="file"]

[Ronnyrr]

Hi Tweakers,

Zonder Ajax/jQuery wilde ik eens proberen een complex formulier in elkaar te zetten.
Nou ging alles redelijk voorspoedig totdat ik afbeeldingen moest verzenden / uploaden.
Hierbij wil ik gebruik maken van new FormData().
Dit is mijn JS code:

JavaScript:

    formElem.addEventListener('submit', (event) => {
            event.preventDefault();
    
            const formData = new FormData();
    
            for(let i = 0; i < inputElems.length; i++) {
                const input = inputElems[i];
                const id = input.getAttribute('id');
    
                if(id === 'images') {
                    for(let f = 0; f < input.files.length; f++) {
                        formData.append(`image-${f}`, input.files[f]);
                    }

                    formData.append('images', input.files);    
                } else if(id) {
                    formData.append(`${id}`, input.value);
                }
            }
            
            for (var [key, value] of formData.entries()) {
                console.log('formData', key, value);
            }
    
            const request = new XMLHttpRequest();
            request.open('POST', '/inc/ajax/PostRequest.php', true);

            request.send(formData);
    });

Zoals je heir kunt zien vul ik het FormData object met key / values. Als ik in PHP het $_POST object return is deze gevuld met alle gewenste data, behalve de afbeeldingen.

Ik probeer images los door te sturen door ze allemaal los te appenden met image-${f} of door het FileList object door te sturen met input.files.
In PHP worden de losse afbeeldingen niet getoond als ik het $_POST object return. Ook het $_FILES object is leeg. De doorgestuurde images is wél gevuld met `images : "[object File],[object File],[object File],[object File]"`, waar ik helaas niet overheen kan loopen oid met een foreach.

PHP code in het Ajax bestand:

PHP:

        $json = file_get_contents('php://input');
        $post = json_decode($json);

        $return['postObj'] = $_POST;
        $return['files'] = $_FILES['images'];
        $return['json'] = $json;
        $return['post'] = $post;

        echo json_encode($return);

Hieruit komen de resultaten:

- postObj: gevuld met de $_POST data behalve de losse afbeeldingen image-${f}
- files: leeg
- json: leeg
- post: leeg

Iemand een oplossing of suggestie voor het correct afhandelen van deze afbeeldingen?
Via PHP wil ik ze uiteindelijk op de server zetten via php move_uploaded_file oid.
Alvast heel erg bedankt !

[b2vjfvj75gjx7]

Grappig, deze persoon had exact dezelfde vraag;

http://stackoverflow.com/q/42829285/5118952

Anyhow... een uitgeklede versie als hieronder werkt goed... mits je IE10 / Android 4.x of hoger gebruikt (en alle andere browsers die minder kritisch zijn).

http://caniuse.com/#feat=xhr2

---

HTML: index.htm

<input type="file" id="upload">

JavaScript:

var url= "upload.php";

  document.getElementById('upload').addEventListener('change', function(e) {

      var file = this.files[0];
      var xhr = new XMLHttpRequest();

      xhr.open('post', url, true);
      var formData = new FormData();
      formData.append("thefile", file);
      xhr.send(formData);

  }, false);

PHP: upload.php

move_uploaded_file($_FILES['thefile']['tmp_name'], 'test/' . $_FILES['thefile']['name']);