mirror of
https://github.com/jasny/bootstrap.git
synced 2026-04-24 03:00:49 -04:00
Merge branch 'dev.fileupload'
+ build bootstrap Conflicts: docs/templates/layout.mustache docs/templates/pages/base-css.mustache docs/templates/pages/javascript.mustache less/bootstrap.less
This commit is contained in:
Arnold Daniels
Binary file not shown.
40
docs/assets/css/bootstrap.css
vendored
40
docs/assets/css/bootstrap.css
vendored
@@ -2954,6 +2954,46 @@ body > .page-alert {
|
||||
font-family: IconicStroke;
|
||||
}
|
||||
}
|
||||
.btn.btn-file {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn.btn-file > input[type="file"] {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fileupload {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.fileupload .uneditable-input {
|
||||
display: inline-block;
|
||||
margin-bottom: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fileupload .thumbnail {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.fileupload .thumbnail > img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-height: 100%;
|
||||
}
|
||||
.fileupload .btn {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fileupload-exists .fileupload-new, .fileupload-new .fileupload-exists {
|
||||
display: none;
|
||||
}
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: 18px;
|
||||
|
||||
78
docs/assets/js/bootstrap-fileupload.js
vendored
Normal file
78
docs/assets/js/bootstrap-fileupload.js
vendored
Normal file
@@ -0,0 +1,78 @@
|
||||
/* ==========================================================
|
||||
* bootstrap-placeholder.js v2.0.0
|
||||
* http://jasny.github.com/bootstrap/javascript.html#placeholder
|
||||
*
|
||||
* Based on work by Daniel Stocks (http://webcloud.se)
|
||||
* ==========================================================
|
||||
* Copyright 2012 Jasny BV.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================== */
|
||||
|
||||
/* TODO: turn this into a proper bootstrap plugin */
|
||||
|
||||
;
|
||||
$(function () {
|
||||
$('*[data-fileupload]').each(function () {
|
||||
var container = $(this);
|
||||
var input = $(this).find(':file');
|
||||
var name = input.attr('name');
|
||||
if (input.length == 0) return;
|
||||
|
||||
var preview = $(this).find('.fileupload-preview').not('.fileupload-new');
|
||||
if (preview.css('display') != 'inline' && preview.css('height') != 'none') preview.css('line-height', preview.css('height'));
|
||||
|
||||
var remove = $(this).find('*[data-dismiss="fileupload"]');
|
||||
|
||||
var hidden_input = $(this).find(':hidden[name="'+name+'"]');
|
||||
if (!hidden_input.length) {
|
||||
hidden_input = $('<input type="hidden" />');
|
||||
container.prepend(hidden_input);
|
||||
}
|
||||
|
||||
var type = container.attr('data-fileupload') == "image" ? "image" : "file";
|
||||
|
||||
input.change(function(e) {
|
||||
hidden_input.val('');
|
||||
hidden_input.attr('name', '')
|
||||
input.attr('name', name);
|
||||
|
||||
var file = e.target.files[0];
|
||||
|
||||
if (type == "image" && preview.length && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match('\\.(gif|png|jpg)$')) && typeof FileReader !== "undefined") {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />');
|
||||
container.addClass('fileupload-exists').removeClass('fileupload-new');
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
preview.html(escape(file.name));
|
||||
container.addClass('fileupload-exists').removeClass('fileupload-new');
|
||||
}
|
||||
});
|
||||
|
||||
remove.click(function() {
|
||||
hidden_input.val('');
|
||||
hidden_input.attr('name', name);
|
||||
input.attr('name', '');
|
||||
|
||||
preview.html('');
|
||||
container.addClass('fileupload-new').removeClass('fileupload-exists');
|
||||
|
||||
return false;
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -1318,6 +1318,16 @@ on multiple lines
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Upload button</h3>
|
||||
<p>It's possible to use a button to upload files, instead of showing the native browser element.</p>
|
||||
<span class="btn btn-file">Upload a file<input type="file" /></span>
|
||||
<p>There is also an interactive file and image upload widgets available. View <a href="./javascript.html#fileupload">the Javascript docs</a> for that.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1907,6 +1917,7 @@ on multiple lines
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -1581,6 +1581,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -359,6 +359,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -142,6 +142,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -254,6 +254,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -92,10 +92,16 @@
|
||||
<li><a href="#buttons">Button</a></li>
|
||||
<li><a href="#collapse">Collapse</a></li>
|
||||
<li><a href="#carousel">Carousel</a></li>
|
||||
<li><a href="#typeahead">Typeahead</a></li>
|
||||
<li><a href="#placeholder">Placeholder</a></li>
|
||||
<li><a href="#inputmask">Input mask</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Input <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#typeahead">Typeahead</a></li>
|
||||
<li><a href="#placeholder">Placeholder</a></li>
|
||||
<li><a href="#inputmask">Inputmask</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#table-href">Table href</a></li>
|
||||
<li><a href="#fileupload">Fileupload</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
@@ -189,7 +195,7 @@
|
||||
<div class="row" style="margin-bottom: 9px;">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#inputmask">Input mask</a></h3>
|
||||
<h3><a href="./javascript.html#inputmask">Inputmask</a></h3>
|
||||
<p>Make sure the user types in the data that you want, by using an input mask.</p>
|
||||
</label>
|
||||
</div>
|
||||
@@ -199,6 +205,12 @@
|
||||
<p>A simple plugin, to turn table rows into a links.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#fileupload">Fileupload</a></h3>
|
||||
<p>Create a visually appealing file or image upload element.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3>Transitions <small class="muted">*</small></h3>
|
||||
@@ -1560,6 +1572,115 @@ $('.myCarousel').carousel({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Fileupload
|
||||
================================================== -->
|
||||
<section id="fileupload">
|
||||
<div class="page-header">
|
||||
<h1>Fileupload <small>bootstrap-fileupload.js</small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About</h3>
|
||||
<p>The file upload plugin allows you to create a visually appealing file or image upload element.</p>
|
||||
<a href="assets/js/bootstrap-fileupload.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
|
||||
<div class="span9 columns">
|
||||
<h2>Examples file upload element</h2>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="file">
|
||||
<div class="fileupload-preview fileupload-exists uneditable-input"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="file">
|
||||
<div class="uneditable-input"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<h2>Example image upload elements</h2>
|
||||
<p>Using the given elements, you can layout the upload widget the way you want, either with a fixed <code>width</code> and <code>height</code> or with <code>max-width</code>
|
||||
and <code>max-height</code>.</p>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview fileupload-new thumbnail" style="width: 250px; height: 180px;"><img src="http://www.placehold.it/250x180/EFEFEF/AAAAAA&text=no+image" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 250px; max-height: 180px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview thumbnail" style="width: 250px; height: 180px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<div class="fileupload fileupload-new" data-fileupload="image" style="text-align: right">
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
<div class="fileupload-preview fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>Use the <code>data-fileupload</code> attribute to register the file upload widget. The main container should either have the <code>.fileupload-new</code> class for a new record or if the record
|
||||
does not have file or <code>.fileupload-exists</code> if an existing file is present. Elements inside the container with the <code>.fileupload-new</code> and <code>fileupload-exists</code>
|
||||
class will be shown or hidden based on the current state. The content of <code>.fileupload-preview</code> is replaced when a file is selected. Implement a button to clear
|
||||
the file with <code>data-dismiss="fileupload"</code>.</p>
|
||||
|
||||
<h4>File upload element</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-fileupload="file">
|
||||
<div class="fileupload-preview fileupload-exists uneditable-input"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>Image upload element</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview fileupload-new thumbnail"><img src="" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
@@ -1595,6 +1716,7 @@ $('.myCarousel').carousel({
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -792,6 +792,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -435,6 +435,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
1
docs/templates/layout.mustache
vendored
1
docs/templates/layout.mustache
vendored
@@ -112,6 +112,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
{{#production}}
|
||||
|
||||
10
docs/templates/pages/base-css.mustache
vendored
10
docs/templates/pages/base-css.mustache
vendored
@@ -1242,6 +1242,16 @@ on multiple lines
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Upload button{{/i}}</h3>
|
||||
<p>{{_i}}It's possible to use a button to upload files, instead of showing the native browser element.{{/i}}</p>
|
||||
<span class="btn btn-file">Upload a file<input type="file" /></span>
|
||||
<p>{{_i}}There is also an interactive file and image upload widgets available. View <a href="./javascript.html#fileupload">the Javascript docs</a> for that.{{/i}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
130
docs/templates/pages/javascript.mustache
vendored
130
docs/templates/pages/javascript.mustache
vendored
@@ -16,10 +16,16 @@
|
||||
<li><a href="#buttons">{{_i}}Button{{/i}}</a></li>
|
||||
<li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
|
||||
<li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
|
||||
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
|
||||
<li><a href="#placeholder">{{_i}}Placeholder{{/i}}</a></li>
|
||||
<li><a href="#inputmask">{{_i}}Input mask{{/i}}</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Input{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
|
||||
<li><a href="#placeholder">{{_i}}Placeholder{{/i}}</a></li>
|
||||
<li><a href="#inputmask">{{_i}}Inputmask{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#table-href">{{_i}}Table href{{/i}}</a></li>
|
||||
<li><a href="#fileupload">{{_i}}Fileupload{{/i}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
@@ -113,7 +119,7 @@
|
||||
<div class="row" style="margin-bottom: 9px;">
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#inputmask">Input mask</a></h3>
|
||||
<h3><a href="./javascript.html#inputmask">Inputmask</a></h3>
|
||||
<p>{{_i}}Make sure the user types in the data that you want, by using an input mask.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
@@ -123,6 +129,12 @@
|
||||
<p>{{_i}}A simple plugin, to turn table rows into a links.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#fileupload">Fileupload</a></h3>
|
||||
<p>{{_i}}Create a visually appealing file or image upload element.{{/i}}</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></h3>
|
||||
@@ -1482,4 +1494,112 @@ $('.myCarousel').carousel({
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Fileupload
|
||||
================================================== -->
|
||||
<section id="fileupload">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Fileupload{{/i}} <small>bootstrap-fileupload.js</small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>{{_i}}About{{/i}}</h3>
|
||||
<p>{{_i}}The file upload plugin allows you to create a visually appealing file or image upload element.{{/i}}</p>
|
||||
<a href="assets/js/bootstrap-fileupload.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
|
||||
</div>
|
||||
|
||||
<div class="span9 columns">
|
||||
<h2>{{_i}}Examples file upload element{{/i}}</h2>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="file">
|
||||
<div class="fileupload-preview fileupload-exists uneditable-input"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="file">
|
||||
<div class="uneditable-input"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<h2>{{_i}}Example image upload elements{{/i}}</h2>
|
||||
<p>{{_i}}Using the given elements, you can layout the upload widget the way you want, either with a fixed <code>width</code> and <code>height</code> or with <code>max-width</code>
|
||||
and <code>max-height</code>.{{/i}}</p>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview fileupload-new thumbnail" style="width: 250px; height: 180px;"><img src="http://www.placehold.it/250x180/EFEFEF/AAAAAA&text=no+image" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 250px; max-height: 180px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview thumbnail" style="width: 250px; height: 180px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 columns">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<div class="fileupload fileupload-new" data-fileupload="image" style="text-align: right">
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
<div class="fileupload-preview fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}Use the <code>data-fileupload</code> attribute to register the file upload widget. The main container should either have the <code>.fileupload-new</code> class for a new record or if the record
|
||||
does not have file or <code>.fileupload-exists</code> if an existing file is present. Elements inside the container with the <code>.fileupload-new</code> and <code>.fileupload-exists</code>
|
||||
class will be shown or hidden based on the current state. The content of <code>.fileupload-preview</code> is replaced when a file is selected. Implement a button to clear
|
||||
the file with <code>data-dismiss="fileupload"</code>.{{/i}}</p>
|
||||
|
||||
<h4>{{_i}}File upload element{{/i}}</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-fileupload="file">
|
||||
<div class="fileupload-preview fileupload-exists uneditable-input"></div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h4>{{_i}}Image upload element{{/i}}</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="fileupload fileupload-new" data-fileupload="image">
|
||||
<div class="fileupload-preview fileupload-new thumbnail"><img src="" /></div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail"></div>
|
||||
<div>
|
||||
<span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -294,6 +294,7 @@
|
||||
<script src="assets/js/bootstrap-inputmask.js"></script>
|
||||
<script src="assets/js/bootstrap-placeholder.js"></script>
|
||||
<script src="assets/js/bootstrap-table-href.js"></script>
|
||||
<script src="assets/js/bootstrap-fileupload.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user