Reputation: 501
I have an input which accepts multiple files:
<input id="propertyImages" type="file" name="submission_img[]" multiple accept=".jpg, .jpeg, .png, .gif"/>
I then POST this data to a PHP file via JS/Ajax:
//Compiling the data which will be POSTed using AJAX. Note that the input above with id of propertyImages is not part of the form with id accommodationForm and is therefore appended to the formData.
var form = $("#accommodationForm")[0];
var formData = new FormData(form);
var propertyImages = document.getElementById("propertyImages");
for(var i=0; i<propertyImages.files.length; i++){
formData.append('propImages[]', propertyImages.files[i]);
}
//Printing to console the formData entries to confirm the formData data:
for (var d of formData.entries()) {
console.log(d);
}
//The partial code for the ajax call:
$.ajax({
url: "includes/handlers/ajax_submit_accommodation.php",
method: "POST",
data: formData,
...
The PHP code to which the data is POSTed:
$errorstatus = 0; //Used as an error flag
$maximagesize = 10485760; // Max file size allowed = 10MB
$acceptableimage = array( //The allowed mime types
'image/jpeg',
'image/jpg',
'image/png',
);
$submission_images_array = array();
$output = ""; //Used for debugging purposes
for($x=0; $x<30; $x++){ //30 is the upper limit for the amount of images POSTed
if($_FILES['propImages']['size'][$x] != 0){
if( $_FILES['propImages']['size'][$x] >= $maximagesize || (!in_array($_FILES['propImages']['type'][$x], $acceptableimage))) {
$errorstatus = 1;
} else {
$submission_img = $_FILES['propImages']['name'][$x];
$submission_img = pathinfo($submission_img, PATHINFO_FILENAME);
$submission_img = $submission_img.'-'.$user_id.'-'.rand().'.jpeg';
array_push($submission_images_array, $submission_img);
$submission_img_tmp = $_FILES['propImages']['tmp_name'][$x];
compressImage($submission_img_tmp, '../../submitted_media/accommodation/'.$submission_img, 50);
$output .= "$x:"." ".$submission_img."\n";
}
} else {
$output .= "$x: Empty image\n";
$submission_img = "";
array_push($submission_images_array, $submission_img);
}
}
file_put_contents('../../filenames.txt', $output ); // DEBUG
I want the user to attach a maximum of 30 images. I have made sure that the front end and back end check for this. The issue I am having is that I can attach 30 images - the debugging confirms this via the printing to console of the formData
...i.e. the formData
contains all the image data. However, when I look at the filenames.txt
which I logged in the PHP it only contains the first 20 file names, while the last 10 entries is logged as "Empty image" (as I instructed in the code if the image size is 0).
Notes:
I have made sure (using other JS code) that propertyImages.files.length
in the for
loop cannot be greater than 30 and that when I attach 30 images, that the length is indeed 30.
I have made sure that max_input_vars
in the PHP.ini file is not the issue.
The image sizes of the last 10 files are NOT 0. This has been confirmed by the logging of formData
Upvotes: 1
Views: 70
Reputation: 14520
Have a look at the max_file_uploads directive:
max_file_uploads integer
The maximum number of files allowed to be uploaded simultaneously.
As shown in the table in the "File Uploads" section, it defaults to 20:
Name Default Changeable Changelog
...
max_file_uploads 20 PHP_INI_SYSTEM Available since PHP 5.2.12.
You'll need to update that value your php.ini
.
Also check you don't exceed post_max_size or upload_max_filesize.
Upvotes: 1