Multiple Upload Images

Question

I want to perform multiple uploads but the following message appears:

Notice: Undefined index: files in C: xampp htdocs fotolog Adm upload_fotos.php on line 6

Warning: Invalid argument supplied for foreach() in C: xampp htdocs fotolog Adm upload_fotos.php on line 6

Javascript:

$(document).ready(function(){

    $('#uploadForm').on('submit',function(e)){
        e.preventDefault();
        $.ajax({
            url:"upload_fotos.php"
            data: new FormData(this),
            contentType: false,
            processData: function(data)
            success: function(data){
                $("#galley").html(data);
                alert("imagem foi");

            }
        });
    });
});

<div class="container">  
    <form id="uploadForm" action="upload_fotos.php" method="post">  
        <div id="gallery"></div><div style="clear:both;"></div><br /><br />  
        <div class="col-md-4" align="right">  
            <label>Upload Multiple Image</label>  
        </div>  
        <div class="col-md-4">  
            <input name="files[]" type="file" multiple />  
        </div>  
        <div class="col-md-4">  
            <input type="submit" submitvalue="Submit" />  
        </div>  
        <div style="clear:both"></div>  
    </form>  
</div>
</form>

PHP:

 <?php  
 //upload.php  
 $output = '';  
 if(is_array($_FILES))   
 {  
      foreach ($_FILES['files']['name'] as $name => $value)  
      {  
        $file_name = explode(".", $_FILES['files']['name'][$name]);  
        $allowed_extension = array("jpg", "jpeg", "png", "gif"); 
           if(in_array($file_name[1], $allowed_ext))  
           {  
                $new_name = md5(rand()) . '.' . $file_name[1];  
                $sourcePath = $_FILES['files']['tmp_name'][$name];  
                $targetPath = "foto/".$new_name;  
                if(move_uploaded_file($sourcePath, $targetPath))  
                {  
                     $output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';  
                }                 
           }            
      }  
      echo $output;  
 }  
 ?>  

Answer 1

It’s so much wrong in your code that I don’t even know how you got the error, in fact I think due to this series of errors rather than Ajax the form was being sent by normal request, since there were typing errors in the JS it even processed. See the problems:

1. It seems that you do not understand well what is Json (object)

   $.ajax({                          <--- Falta definir o type: POST
       url:"upload_fotos.php"        <--- Falta virgula
       data: new FormData(this),
       contentType: false,
       processData: function(data)   <--- Função não terminada, na verdade isto deveria ser false e não uma função
       success: function(data){
           $("#galley").html(data);
           alert("imagem foi");
   
       }                             <--- Falta definir o error:function(), é fundamental
   });
   

2. You changed the name of the variables:

   $allowed_extension = array("jpg", "jpeg", "png", "gif"); 
   
   if(in_array($file_name[1], $allowed_ext))
   

   In one place you use $allowed_extension and the other $allowed_ext.

Your problems are a series of failures your own with typo, and you probably didn’t mind reading the jQuery documentation, I’ll give you a hint Ctrl+C and Ctrl+V in codes even works, but it won’t do much good if you don’t know the least of what you’re doing.

Corrected code

jQuery (recommend to read the documentation http://api.jquery.com/jquery.ajax/):

$(document).ready(function(){
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST", //O type que faltava
            url: "upload_fotos.php",
            processData: false, //Aqui tem que ser false para pode enviar FormData
            contentType: false,
            data: new FormData(this),
            success: function(data){
                $("#galley").html(data);
                alert("imagem foi");
            },
            error: function(a, b, c) { //Isto ser para tratar erros de HTTP ou conexão
                alert([a, b, c]);
            }
        });
    });
});

PHP can look like this:

if(is_array($_FILES))
{
    $output = '';

    foreach ($_FILES['files']['name'] as $name => $value)
    {
        $file_name = explode(".", $_FILES['files']['name'][$name]);
        $allowed_extension = array("jpg", "jpeg", "png", "gif");

        if(in_array($file_name[1], $allowed_extension))
        {
            $new_name = md5(rand()) . '.' . $file_name[1];
            $sourcePath = $_FILES['files']['tmp_name'][$name];
            $targetPath = "foto/".$new_name;

            if(move_uploaded_file($sourcePath, $targetPath))
            {
                $output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';
            }
        }
    }
    echo $output;
}