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: