Skip to content

Instantly share code, notes, and snippets.

@potato4d

potato4d/d_and_d_and_manual.php

Created January 25, 2016 05:30
Show Gist options
  • Save potato4d/513009003182844e65dc to your computer and use it in GitHub Desktop.
Save potato4d/513009003182844e65dc to your computer and use it in GitHub Desktop.
Download ZIP
D&Dとファイル選択が可能な、 https://gist.github.com/potato4d/9215eb2645eecc2117a1 の強化版
Raw
d_and_d_and_manual.php
<?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();
}
?>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D&amp;D Test</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
body{
text-align: center;
}
#result{
background-color:#ccc;
margin: 20px auto;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: block;
width: 160px;
height: 160px;
}
#result:hover{
background: #aaa;
}
a{
margin: 20px 10px 10px 0;
padding: 10px;
background: #139AFF;
border-radius: 2px;
display: inline-block;
text-decoration: none;
color: #fff;
border:solid 2px #0285FF;
}
input[type="file"]{
display: none;
}
#background{
background: rgba(0,0,0,0.8);
display: block;
width: 100vw;
height:100vh;
position: absolute;
left: 0;
top: 0;
z-index: 100000;
display: none;
}
.loader {
font-size: 90px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin:auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease;
animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.297em -0.775em 0 -0.477em #ffffff;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.749em -0.34em 0 -0.477em #ffffff;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.09em 0 -0.477em #ffffff;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.297em -0.775em 0 -0.477em #ffffff;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.749em -0.34em 0 -0.477em #ffffff;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.09em 0 -0.477em #ffffff;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
}
}
</style>
</head>
<body>
<h1>画像ファイルのアップロード</h1>
<div id="drop" dropzone style="padding:20px 50px;background:#f0f0f0;">
D&amp;D here<br>
<a href="#" class="button">またはファイルを選択</a>
<input type="file" name="file" id="file">
</div>
<div id="result">ここに画像が表示される</div>
filename:<span id="filename"></span>
<div id="background"><div class="loader">Loading...</div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var URL = "d_and_d_and_manual.php";
var uploadFile;
function doUpload(){
$("#background").fadeIn();
setTimeout(function (){
var file = uploadFile;
var formData = new FormData();
formData.append("file", file);
$.ajax({
url: URL,
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() {
alert("error");
})
.always(function(data) {
$("#background").fadeOut();
});
}, 1000);
}
$(function() {
$(".button").click(function(event) {
$("#file").click(); // ここでファイル選択を着火
});
$("#file").change(function(event) {
uploadFile = this.files[0]; // アップロードファイルを選択したファイルに指定
doUpload();
});
$("#drop").on("drop", function(event) {
uploadFile = event.originalEvent.dataTransfer.files[0]; // アップロードファイルをD&Dしたファイルに指定
doUpload();
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