Upload image Php Bootstrap File Input (Undefined offset)

Resolved, I stopped using the Bootstrap File Input , in fact the same only works with Drag and Drop if uploaded be done via Ajax.

I'm using HTML5.

<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>

<input type="file" id="files" name="files[]"  multiple="multiple" />
<output id="list"></output>

Javascript:

  function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
 }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

No Post

        if(count($_FILES['files']['name']) > 0)
        {
            for($i=0; $i<count($_FILES['files']['name']); $i++)
            {
                //Get the temp file path
                $tmpFilePath = $_FILES['files']['tmp_name'][$i];

                //Make sure we have a filepath
                if($tmpFilePath != "")
                {

                    $shortname = $_FILES['files']['name'][$i];
                    $filePath = "images/anuncios/" . date('d-m-Y-H-i-s').'-'.$_FILES['files']['name'][$i];
                    if(move_uploaded_file($tmpFilePath, $filePath))
                    {
                        $files[] = $shortname;
                        //insert into db
                        //use $shortname for the filename
                        //use $filePath for the relative url to the file
                    }
                }
            }
        }

Here I've included isset() to see if it was sent:

$uploads_dir = 'images/';
$extok = array( 'jpg', 'jpeg', 'gif', 'png', 'bmp' );

$img = array();
if( isset( $_FILES['files'] ) ) {
   $fdata = $_FILES['files'];
   $count = count( $fdata['name'] );

   for ($i = 0; $i < $count; ++$i ) {
      $ext = pathinfo( $fdata['name'][$i], PATHINFO_EXTENSION);

      if( in_array( strtolower( $ext ), $extok ) ) { 
         $imagem_nome = uniqid().'.'.$ext;
         $temp_name = $fdata['tmp_name'][$i];

         move_uploaded_file($temp_name, $uploads_dir.$imagem_nome );
         $img[] = $imagem_nome;
      }
   }
}

I took advantage of and changed the extension's RegEx by an appropriate function, and check for acceptable extensions.

I also removed MD5 from uniquid . The only thing uniqid does good, is to get a unique ID. Making MD5 of it, it just ruined the uniqid .

The time() within uniqid() also does not make sense, it has been removed.

If you prefer, you can use multiple="multiple" , not to get an empty attribute:

<input id="file-upload" name="files[]" type="file" multiple="multiple">