PHP - Multiple image upload does not work

Navigation
1

I'm implementing a Drag and Drop scheme in my project, as in the example below: 

var holder = document.getElementById('holder'),
    tests = {
      filereader: typeof FileReader != 'undefined',
      dnd: 'draggable' in document.createElement('span'),
      formdata: !!window.FormData,
      progress: "upload" in new XMLHttpRequest
    }, 
    support = {
      filereader: document.getElementById('filereader'),
      formdata: document.getElementById('formdata'),
      progress: document.getElementById('progress')
    },
    acceptedTypes = {
      'image/png': true,
      'image/jpeg': true,
      'image/gif': true
    },
    progress = document.getElementById('uploadprogress'),
    fileupload = document.getElementById('upload');

"filereader formdata progress".split(' ').forEach(function (api) {
  if (tests[api] === false) {
    support[api].className = 'fail';
  } else {
    support[api].className = 'hidden';
  }
});

function previewfile(file) {
  if (tests.filereader === true && acceptedTypes[file.type] === true) {
    var reader = new FileReader();
    reader.onload = function (event) {
      var image   = new Image();
      image.src   = event.target.result;
      image.width = 250; // a fake resize
      holder.appendChild(image);
    };

    reader.readAsDataURL(file);
  }  else {
    holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.size ? (file.size/1024|0) + 'K' : '');
    console.log(file);
  }
}

function readfiles(files) {
    debugger;
    var formData = tests.formdata ? new FormData() : null;
    for (var i = 0; i < files.length; i++) {
      if (tests.formdata) formData.append('file', files[i]);
      previewfile(files[i]);
    }

    //Meu php upload
    if (tests.formdata) {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'php/upPhotos.php');

      xhr.onload = function() {
        progress.value = progress.innerHTML = 100;
      };

      if (tests.progress) {
        xhr.upload.onprogress = function (event) {
          if (event.lengthComputable) {
            var complete = (event.loaded / event.total * 100 | 0);
            progress.value = progress.innerHTML = complete;
          }
        }
      }

      xhr.send(formData);
    }
}

if (tests.dnd) { 
  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragend = function () { this.className = ''; return false; };
  holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
    readfiles(e.dataTransfer.files);
  }
} else {
  fileupload.className = 'hidden';
  fileupload.querySelector('input').onchange = function () {
    readfiles(this.files);
  };
}
/*File upload*/
#holder { border: 10px dashed #ccc; width: 300px; min-height: 200px; margin: 20px auto; }
#holder.hover { border: 10px dashed #0c0;}
#holder img { display: inline-block; margin: 10px auto; max-height: 600px; width: 30%; margin: 1%;}
#holder p { margin: 10px; font-size: 14px; }
progress:after { display: none !important; }
.fail { background: #c00; padding: 2px; color: #fff; }
.hidden { display: none !important;}
<!DOCTYPE html>
 <html>
   <head>
     <link rel="icon" href="images/favicon.png"/>
     <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <!--<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>-->
	 <link href="css/photos.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>
			<div class="content">
				<div id="holder"></div> 
				<p id="upload" class="hidden"><label>Drag & drop not supported, but you can still upload via this input field:<br><input type="file"></label></p>
				<p id="filereader">File API & FileReader API not supported</p>
				<p id="formdata">XHR2's FormData is not supported</p>
				<p id="progress">XHR2's upload progress isn't supported</p>
				<progress class="hidden" id="uploadprogress" max="100" value="0">0</progress>
			</div>
			
     <!--Scripts-->
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scripttype="text/javascript" src="js/file_upload.js"></script>
  
  </body>
</html>

After selecting the images I would like to upload them ... But when I drag the images, they are not moved to my folder, below is the php that I mounted: 

<?php
$files = $_FILES['file'];
$allowed = array('png', 'jpg', 'jpeg', 'gif');

for($i = 0; $i < count($files); $i++) {
    $file_tmp   = $files['tmp_name'][$i];
    $file_size  = $files['size'][$i];
    $file_error = $files['error'][$i];
    $file_name  = $files['name'][$i];

    $file_ext = explode('.', $file_name);
    $file_ext = strtolower(end($file_ext));

    if(in_array($file_ext, $allowed)) {
        $file_destination = '../images/upload/'. $file_name;
        move_uploaded_file($file_tmp, $file_destination)
    }
}
?>

What am I doing wrong?

EDITED

I used the var_dump() layer as quoted in the comments ...

The problem is that in $files only one image is coming, when I send more than one and $file_name is returning a letter every time it passes in:

    
asked by anonymous 05.07.2018 / 02:36

1 answer

0

Try it like this: 

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

foreach($_FILES["files"]["tmp_name"] as $key=>$tmp_name) {
            $temp = $_FILES["files"]["tmp_name"][$key];
            $name = $_FILES["files"]["name"][$key];

            if(empty($temp)) {
                break;
            }

            move_uploaded_file($temp,"imoveis/".$name);
}
    
05.07.2018 / 13:26
How to use values of each entry in Xamarin? Jquey does not work with elements inserted using .html ()