masih dalam tema javascript . sekarang kita membuat drag and drop javascript vanilla dengan php .
langsung saja kita buat 3 file berikut :
1. index.php
<html>
<head>
<title> Drag and Drop </title>
<link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
<p><img id="uploads" /></p>
<div class="dropzone" id="dropzone"> Drag and Drop Here </div>
<script type="text/javascript">
(function (){
var dropzone = document.getElementById('dropzone');
//upload to server
var upload = function(files){
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file',files[0]);
xhr.onload = function(){
var data = JSON.parse(this.responseText);
document.getElementById('uploads').src = data[0].file;
}
xhr.open('post','upload.php');
xhr.send(formData);
}
//init file drop
dropzone.ondrop = function (e){
e.preventDefault();
this.className = 'dropzone';
upload(e.dataTransfer.files);
}
//init css before
dropzone.ondragover = function(){
this.className = 'dropzone dragover';
return false;
}
//init css after
dropzone.ondragleave = function(){
this.className = 'dropzone';
return false;
}
}());
</script>
</body>
</html>
2. upload.php
<?php
$uploaded = array();
if(!empty($_FILES['file']['name'])){
$name = $_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'],'upload/'.$name)){
$uploaded[] = array(
'name'=>$name,
'file'=>'upload/'.$name
);
}
}
echo json_encode($uploaded);
?>
3. global.css
body{
font-size: Arial;
}
.dropzone{
width:300px;
height:300px;
border:2px dashed #ccc;
color:#ccc;
line-height: 300px;
text-align: center;
}
.dropzone.dragover{
border-color:#000;
color:#000;
}
simple bukan , happy nice day.
No comments:
Post a Comment