Struggling with uploading data fields and file

[PhilAJ52]

<script>            function sendData(form)             {                       var postform = new FormData();             var fileselect = document.getElementById('mypic');            var files = fileselect.files;                postform.append('SBP_Details', document.getElementById('Details'));            // Loop through each of the selected files.            for (var i = 0; i < files.length; i++) {                var file = files[i];                // Check the file type.                if (!file.type.match('image.*')) {                    continue;                }                // Add the file to the request.                postform.append('upload_file[]', file, file.name);            }        //        postform.append('upload_file', document.getElementById('mypic'));      var xmlhttp = new XHRObject();                                          xmlhttp.onreadystatechange=function()             {                if (xmlhttp.readyState==4 && xmlhttp.status==200)                {                                    //xmlhttp.responsetext will have what is sent back - use Print_R in php                                   }             }                                         xmlhttp.open("POST","http://stxxx.co.uk/SBPostPost.php", false);                          xmlhttp.setRequestHeader('Content-Type','multipart/form-data');                          xmlhttp.send(postform);                            }             </script> 

Getting very confused by all the options available - could someone please help.

 

I'm developing a hybrid HTML5/JS App in XDK that sends form data and a picture file to a php server. I can get the data fields but struggling with a file.

 

The JS that sends is as above.; When debugging the console looks as thou it's sent ok but the PHP that echoes $_POST and $_FILES just shows an empty array ...

 

Can Anyone point me to a tutorial that shows bot sides (JS and PHP ) please

 

 

[justsomeguy]

You should be able to use the console (the net tab specifically) to look at the ajax request and look at the data that was sent with it, you can see all of the post data that got submitted. Start there to see if you're sending the correct data.

[PhilAJ52]

Request URL:http://streetbyz.co.uk/SBPostPost.phpRequest Method:POSTStatus Code:200 OKRequest HeadersProvisional headers are shownContent-Type:multipart/form-dataOrigin:http://127.0.0.1:58889Referer:http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/Phils/AppData/Local/XDK/xdk-scratchdir/e14eb410-7cf2-4bed-ba25-515e6df98e8c/platforms/ios/www/index.htmlUser-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4X-DevTools-Emulate-Network-Conditions-Client-Id:2F78D5C0-6229-4DE8-8288-5262CF3BFECERequest Payload------WebKitFormBoundaryylWwxRTQ6W9dBHqAContent-Disposition: form-data; name="SBP_Details"[object HTMLTextAreaElement]------WebKitFormBoundaryylWwxRTQ6W9dBHqA--Response HeadersContent-Encoding:gzipContent-Length:287Content-Type:text/htmlDate:Mon, 21 Sep 2015 21:13:25 GMTServer:Microsoft-IIS/8.5Vary:Accept-Encoding

Thanks 'more Human than Human' - I checked the console and I get the following; Not sure if this looks right or not - and how to get at it thru PHP

[justsomeguy]

Content-Disposition: form-data; name="SBP_Details"[object HTMLTextAreaElement]

You're adding the actual textarea element to the form data, not the text inside it. Get the text with the value attribute.That's the only value it is sending, I don't see the file upload in that request. Add some debugging statements to the part that creates the form data and submits it to write some debugging output to the console so you can see what it's doing. Maybe it's not adding any files, add some console.log statements to figure out why.