ForEach loops with multiple file upload field?

[shortysbest]

I have a file upload field that allows multiple image uploads, however I cannot figure out how to do the for loops or what ever it would be to upload each file to my server.

It works perfectly fine if I only select a single image, after that it doesn't.

 

My upload field:

<form><input type="file" name="uploadFile" class="custom-upload" multiple="multiple" onChange="photoUpload(this.form,'ajax/photos/upload_photos.php','photo'); return false;"/></form>

 

My php uploading script:

 

$file = isset($_FILES['uploadFile']['name']) ? $_FILES['uploadFile'] : '';

$fileArr = explode("." , $file["name"]);
$ext = strtolower($fileArr[count($fileArr)-1]);

$allowed = array("jpg", "jpeg", "png", "gif", "bmp");

if (in_array($ext, $allowed))
{

include("../../photo_upload_sizes.php");
print $filename;

mysql_query("INSERT INTO photos SET user_id='$session', album_id='$album_id', profile='0', photo='".$filename."', date='$date'");

move_uploaded_file($file["tmp_name"],"../../photos/".$filename.".jpg");


}

[monkeytooth]

I'm not sure exactly myself with this as I never finished one of my projects doing the same yet. So with that I can tell you this much

 

$_FILES is an array.. try submitting your form with multiple files to a php file that just has the following

 

echo "<pre>";
print_r($_FILES);
echo "</pre>";

 

The above will show you the construct of the array, and what data there is in it to work with. From that you should be able to construct a foreach loop that will in return upload the files one by one. Bare in mind also most providers of the hosting have some limit or another on there servers. Ususally 64mb as that I believe is the default in the php.ini of what makes php run so to speak, so try not to upload to much or you'll get time out errors.

[shortysbest]

Thanks, this is how it's output. although it didn't do it for every image I selected :\

 

Array
(
    [uploadFile] => Array
        (
            [name] => HPIM4104.JPG
            [type] => image/jpeg
            [tmp_name] => C:\wamp\tmp\phpD61E.tmp
            [error] => 0
            [size] => 2165662
        )

)

[shortysbest]

My image field is being submitted through a form and I am trying to return the raw array of values of the selected images and such but I can't, all it returns is: [object HTMLFormElement] . Do you know how to return the form elements? I'm not sure why my form is only recognizing 1 image when i select multiple.

[shortysbest]

My updated php script which works uploading the image in the foreach loop is:

 

foreach($_FILES as $file)
{
$fileArr = explode("." , $file["name"]);
$ext = strtolower($fileArr[count($fileArr)-1]);

$allowed = array("jpg", "jpeg", "png", "gif", "bmp");

if (in_array($ext, $allowed)){

include("../../photo_upload_sizes.php");
print $filename;

mysql_query("INSERT INTO photos SET user_id='$session', album_id='$album_id', profile='0', photo='".$filename."', date='$date'");
move_uploaded_file($file["tmp_name"],"../../photos/".$filename.".jpg");

}
}

 

I think it's all set, but $_FILES is only returning one image when i select multiple.

 

My javascript that does the uploading and everything is:

 

//////////////////////////////////////////////FILE UPLOAD
function photoUpload(form, action_url, div_id)
{

var session = $.cookie('id');
// Create the iframe...
var iframe = document.createElement("iframe");
iframe.setAttribute("id","upload_iframe");
iframe.setAttribute("name","upload_iframe");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");

// Add to document...
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name="upload_iframe";

iframeId = document.getElementById("upload_iframe");

// Add event...
var eventHandler = function()  {

if (iframeId.detachEvent)
iframeId.detachEvent("onload", eventHandler);
else
iframeId.removeEventListener("load", eventHandler, false);

// Message from server...
if (iframeId.contentDocument) {
content = iframeId.contentDocument.body.innerHTML;
} else if (iframeId.contentWindow) {
content = iframeId.contentWindow.document.body.innerHTML;
} else if (iframeId.document) {
content = iframeId.document.body.innerHTML;
}
if(content)
{
document.getElementById(div_id).innerHTML = content;
$("#photo").html("<img src='photos/"+content+"_170.jpg' />");
var prepending_photo = " <li><img src='photos/"+content+"_110.jpg' /></li> ";
$(".photos-stream").prepend(prepending_photo);
$(".upload-photo-loading").fadeOut("fast");
$(".photos-none-uploaded").hide();
}
else
{
//$(".add-photo-loading").html("Invalid Filetype");
//$(".add-photo-loading").attr("class","upload-error");

}
//$('#post-photo'+session).attr("src","photos/small_thumb/"+content);
// Del the iframe...
setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
}

if (iframeId.addEventListener)
iframeId.addEventListener("load", eventHandler, true);
if (iframeId.attachEvent)
iframeId.attachEvent("onload", eventHandler);

// Set properties of form...
form.setAttribute("target","upload_iframe");
form.setAttribute("action", action_url);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");

// Submit the form...
form.submit();

//$(".upload-error").attr("class","add-photo-loading");
$(".upload-photo-loading").html("Uploading...");
$(".upload-photo-loading").css({"display":"block"});
$("#photo").empty();
}

 

 

and the file field is:

 

<form><input type="file" name="uploadFile" class="custom-upload" multiple="multiple" onChange="photoUpload(this.form,'ajax/photos/upload_photos.php','photo'); return false;"/></form>

[Murdock]

You may be getting only one image because of your file input name. Try:

 

<input type="file" name="uploadFile[]"... 

 

 

Doing this:

<form method="post" action="">
<input type="file" name="uploadFile[]" class="custom-upload" multiple="multiple" />
<input type="submit" name="submit" value="Submit">
</form>

 

Returned this:

/*
if(isset($_POST['submit'])) {
echo '<pre>';
var_dump($_POST);
echo '</pre>;
}
*/

array(2) {
  ["uploadFile"]=>
  array(4) {
    [0]=>
    string(10) "Desert.jpg"
    [1]=>
    string(12) "Penguins.jpg"
    [2]=>
    string(10) "Tulips.jpg"
    [3]=>
    string(13) "Jellyfish.jpg"
  }
  ["submit"]=>
  string(6) "Submit"
}