PHP - Uploading multiple images does not work

Asked

Viewed 72 times

1

I am 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>
		<script type="text/javascript" src="js/file_upload.js"></script>
  
  </body>
</html>

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

<?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 cameo var_dump() as quoted in the comments...

The problem is that in $files there’s only one image coming, when I send more than one and the $file_name is returning a letter every time you pass the for: inserir a descrição da imagem aqui

php javascript html html5

  • Is there an error? Images have been moved to an unknown folder?

  • No error occurs, not that I see explicitly on the screen and the images are not moved

  • You have access to the server, it’s apache?

  • Oh yes, for now it is local on my machine, I use WAMP with apache

  • Access the contents of .../error.log, not sure the path in Windows...

  • The error log file does not exist, I created it and performed the operations again and still nothing was filled in it, so I believe there are no errors. @Andersoncarloswoss Thanks, I’ve already made this modification, and there are no errors because I’m trying to send only one image as a test

  • Inside your go put one var_dump($file_name) and see the names of the files being processed...

  • @Andersoncarloswoss I put the var_dump($file_name) and nothing showed up in my browser, I also tried to call php by the way http://localhost/Fotografia/php/upPhotos.php Only if you see the error Notice: Undefined index: file in C:\wamp\www\Fotografia\php\upPhotos.php on line 2

  • If nothing has appeared, nothing has been processed. Have you tried to see the output of var_dump($_FILES)?

  • @Andersoncarloswoss Sorry for the ignorance, but the result of the var_dump($_FILES) should appear in the browser, right? As if it were a echo?

  • Not necessarily. The output will go to the body of the HTTP response. As you are using AJAX, this message will not be displayed naturally. The easiest is to view from the developer’s tools or use Xdebug.

  • @Andersoncarloswoss I did performed the tests with the var_dump() as you suggested and updated the question

Show 7 more comments

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);
}

  • When I use the Warning FOR Invalid argument supplied for foreach() in....

  • Actually the mistake was my lack of attention, I just needed to make some adaptations in your reply and served me well, thank you.

Browser other questions tagged php javascript html html5

You are not signed in. Login or sign up in order to post.