Skip to content

Instantly share code, notes, and snippets.

@pinscript

pinscript/index.php

Created October 17, 2012 13:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pinscript/3905602 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pinscript/3905602 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.php
<html>
<head>
<style type="text/css">
#drop {
width: 300px;
height: 46px;
border: 3px dashed #c9c9c9;
text-align: center;
padding-top: 25px;
}
#img {
position: absolute;
left: 400px;
top: 10px;
border: 3px dashed green;
}
</style>
<script type="text/javascript">
window.onload = function() {
var drop = document.getElementById("drop");
var previewReader = new FileReader();
previewReader.onload = function(e) {
document.getElementById("img").src = e.target.result;
};
var uploadReader = new FileReader();
var fileName = "";
uploadReader.onload = function(e) {
var buffer = e.target.result;
console.log(e.target);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php?name=" + encodeURIComponent(fileName), true);
xhr.send(buffer);
};
drop.addEventListener("dragover", function(e) {
e.preventDefault();
}, true);
drop.addEventListener("drop", function(e) {
var file = e.dataTransfer.files[0];
fileName = file.name;
previewReader.readAsDataURL(file);
uploadReader.readAsArrayBuffer(file);
e.preventDefault();
}, true);
};
</script>
</head>
<body>
<div id="drop">
Drop file
</div>
<img id="img" />
</body>
</html>
Raw
upload.php
<?php
$data = file_get_contents('php://input');
$buffer = base64_encode($data);
file_put_contents($_GET['name'], $data);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment