jquery-multifile
Version:
jQuery Multiple File Selection Plugin
94 lines (82 loc) • 3.5 kB
HTML
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../docs.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--link(rel='stylesheet', href='http://highlightjs.org/static/styles/zenburn.css')-->
<!--script(src='http://yandex.st/highlightjs/8.0/highlight.min.js')-->
<!--script(src='docs.js')-->
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css">
<script src="http://prismjs.com/prism.js"></script>
</head>
<body>
<div role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a href="#" class="navbar-brand">Lab</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#tab-Overview" id="#btn-Overview">maxsize</a></li>
</ul>
</div>
</div>
</div>
<!--
<div class="container">
<div class="jumbotron">
<h1>jQuery MultiFile</h1>
<p>Unobtrusive and downgradable plugin to select multiple files for upload</p>
</div>
</div>
-->
<div class="container-fluid">
<form action="test.php" method="post" enctype="multipart/form-data" target="upload-frame">
<div class="row-fluid">
<div class="col-md-4">
<input name="files[]" type="file" multiple="multiple" data-maxsize="1024" id="our-test" />
</div>
<div class="col-md-8">
<input type="submit" value="Report Results"/>
<br/>
Files will never be uploaded. You can see the code <a href="">here</a>.
<br/>
<iframe id="upload-frame" name="upload-frame" src="about:blank" style="border:#ccc solid 1px; height:600px; width:100%;"></iframe>
</div>
</div>
</form>
<script>
// wait for document to load
$(function(){
// invoke plugin
$('#our-test').MultiFile({
onFileChange: function(){
console.log(this, arguments);
}
});
});
</script>
<pre><code class="language-markup"><form action="test.php" method="post" enctype="multipart/form-data" target="upload-frame">
<input type="submit" value="Report"/> (will NEVER upload)
<br/>
<input name="files[]" type="file" multiple="multiple" class="multi maxsize-1024" />
</form></code></pre>
</div>
<!--// plugin-specific resources //-->
<script src='../ext/jquery.form.js' type="text/javascript" language="javascript"></script>
<script src='../ext/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
<script src='../jquery.MultiFile.js' type="text/javascript" language="javascript"></script>
</body>
</html>