| File Upload - Check out the awesome HTML5 File Upload Format INPUT alternative widgets. Example: View Code Demo |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>HTML5 File Upload Format Inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://w2ui.com/web/css/bootstrap.css" rel="stylesheet">
<script src="http://w2ui.com/web/js/jquery-1.9.1.min.js"></script>
<script src="http://w2ui.com/web/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://w2ui.com/web/js/CodeMirror/lib/codemirror.css">
<script src="http://w2ui.com/web/js/CodeMirror/lib/codemirror.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/javascript.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/htmlmixed.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/css.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/xml.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-fields-1.0.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-fields-1.0.min.js"></script>
<script src="http://w2ui.com/web/pages/code-mirror.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://w2ui.com/web/js/font-awesome/font-awesome.css" />
<style>
/* Begin HTML5 File Upload Format Inputs */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
.w2ui-label {float:left; margin-top:6px; margin-bottom:3px; width:100px; padding:0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; min-height:20px;}
.w2ui-field {margin-bottom:3px; margin-left:108px; padding:3px; min-height:20px;}
span.legend {padding-left:20px; color:#888;}
</style>
</head>
<body>
<div id="content">
<h2>File Upload</h2>
<div class="w2ui-label"> Attach Files: </div>
<div class="w2ui-field"> <input id="file" style="width: 540px; min-height: 50px"/> </div>
<div style="height: 20px;"></div>
<script>$('#file').w2field('file');</script>
<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_170.html">HTML5 File Upload Format Inputs Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll