I am trying to upload an image and a string to my server using an ajax call. I use FormData to combine the information. As a result of submitting the form I get a huge array containing only one entry where all of the information is stored inseparately and therefore is unusable.
This is my current html-file including the script:
<script>
$(function () {
$('form').on('submit', function (e) {
var formData = new FormData($('form')[0]);
e.preventDefault();
//
$.ajax({
type: 'POST',
url: './assets/php/upload.php',
data: formData,
processData: false,
success: function (response) {
console.log(response);
}
});
});
});
</script>
<form enctype="multipart/form-data" id="form">
<label>Specify Input</label></br>
<input type="hidden" name="MAX_FILE_SIZE" value="3000000" />
<input type="file" id="inputFile" name="inputFile">
<label>Specify Output</label></br>
<select name="outputType" id="outputFormat">
<option value="VRT">VRT: Virtual Raster</option>
<option value="GTiff">GTiff: GeoTIFF</option>
</select>
</br>
<input type="submit" value="Convert" id="submitButton">
</form>
And my php-script which I expect to show an array containing the information in a separate entry each:
<?php
echo var_dump($_POST);
This is the result I get in my console right now:
array(1) {
["------WebKitFormBoundary93Z6VA7AXgIaQJIK
Content-Disposition:_form-data;_name"]=>
string(271307) ""MAX_FILE_SIZE"
3000000
------WebKitFormBoundary93Z6VA7AXgIaQJIK
Content-Disposition: form-data; name="inputFile"; filename="cea.tif"
Content-Type: image/tiff
//...
//lots of binary data containing the image
//...
------WebKitFormBoundary93Z6VA7AXgIaQJIK
Content-Disposition: form-data; name="outputType"
VRT
------WebKitFormBoundary93Z6VA7AXgIaQJIK--
"
}