Skip to content

Instantly share code, notes, and snippets.

@potato4d
Last active January 25, 2016 05:33
Show Gist options
  • Save potato4d/9215eb2645eecc2117a1 to your computer and use it in GitHub Desktop.
Save potato4d/9215eb2645eecc2117a1 to your computer and use it in GitHub Desktop.
同一ディレクトリに両方のファイルを置いてる前提
<?php
$uploaddir = __DIR__."/";
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
// バージョン依存問題の解消
if(function_exists("http_response_code")){
http_response_code(200);
}else{
header('HTTP', true, 200);
}
print($_FILES["file"]["name"]);
exit();
} else {
// バージョン依存問題の解消
if(function_exists("http_response_code")){
http_response_code(400);
}else{
header('HTTP', true, 400);
}
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D&amp;D Test</title>
<style>
#result{
background-color:#ccc;
margin: 20px;
background-position: center center;
background-size: contain;
display: block;
width: 160px;
height: 160px;
}
</style>
</head>
<body>
<h1>画像ファイルのアップロード</h1>
<div id="drop" dropzone style="padding:20px 50px;background:#f0f0f0;">
D&amp;D here
</div>
<div id="result">ここに画像が表示される</div>
filename:<span id="filename"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$("#drop").on("drop", function(event) {
var file = event.originalEvent.dataTransfer.files[0];
var formData = new FormData();
formData.append("file", file);
$.ajax({
url: "d_and_d_upload.php",
type: "POST",
contentType: false,
processData: false,
data:formData,
})
.done(function(data) {
console.log("success");
$("#result").text("").attr("style", "background-image:url("+data+")");
$("#filename").text(data);
})
.fail(function() {
console.log("error");
})
.always(function(data) {
console.log(data);
});
return false;
});
}).on("dragover", function(event) {
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment