Menu
DragAndDropIndex.php
[code]
<html>
<head>
<meta charset=”utf-8″>
<title>Drag and Drop Uploading</title>
<style>
body{
font-family: “Arial”, sans-serif;
}
.dropzone{
width:300px;
height:300px;
border: 2px dashed #ccc;
color:#ccc;
line-height: 300px;
text-align: center;
}
.dropzone.dragover{
border-color:#000;
color:#000;
}
</style
</head>
<body>
<div id = “upload”></div>
<div class =”dropzone” id=”dropzone”>Drop files to upload</div>
<script>
(function() {
var dropzone = document.getElementById(‘dropzone’);
var displayUploads = function(data){
var uploads = document.getElementById(‘uploads’),
anchor,
x;
for (x = 0; x < data.length; x = x + 1){
anchor = document.createElement(‘a’);
anchor.href = data[x].file;
anchor.innerText = data[x].name;
uploads.appendChild(anchor);
}
};
var upload = function(files){
var formData = new FormData(),
xhr = new XMLHttpRequest(),
x;
for(x = 0; x < files.length; x = x + 1){
formData.append(‘file[]’, files[x]);
}
xhr.onload = function(){
var data = JSON.parse(this.responseText);
displayUploads(data);
};
xhr.open(‘post’, ‘DragAndDropUpload.php’);
xhr.send(formData);
};
dropzone.ondrop = function(e){
e.preventDefault();
this.className = ‘dropzone’;
upload.(e.dataTransfer.files);
};
dropzone.ondragover = function(){
this.className = ‘dropzone dragover’;
return false;
};
dropzone.ondragleave = function(){
this.className = ‘dropzone’;
return false;
};
}());
</script>
</body>
</html>
Hey guys Im creating a drag and drop file upload consisting of two pages, DragAndDropIndex and DragAndDropUpload. When I drag a file into the dropzone the file opens in the browser instead of uploading into the uploads folder. The ondragover/ondrag leave borders do not change when file goes over perhaps part of problem. Also would like to be able to be able to upload php and html files extensions if possible. I appreciate you guys.
DragAndDropUpload.php (below)
[code]
<?php
header(‘Content-Type: application/json’);
$uploaded = array();
if(!empty($FILES[‘file’][‘name’][0])){
foreach($FILES[‘file’][‘name’] as $position => $name) {
if(move_uploaded_file($_FILES[‘file’][‘temp_name’][$position], ‘uploads/’ . $name)){
$uploaded[] = array(
‘name’ =>$name,
‘file’ => ‘uploads/’ . $name
);
}
}
}
echo json_encode($uploaded);