Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
<span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add new File</h4>
</div>
<div class="modal-body col-md-12" id="modal-body">
<div id="upload">
<div class="col-md-12">
<div id="drop" class="input-group">
<span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn input-group-append">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
<div class="fileupload-buttonbar">
<div>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i><span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>
</button>
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon...
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$(function() {
var ol = $('#upload ol');
$('#drop a').click(function() {
$(this).parent().find('input').click();
});
$('body').on('click', '#openUpload', function(e) {
e.preventDefault();
$('#upload ol').empty();
$('#uploadModal').modal('show');
});
$('#upload').fileupload({
messages: {
maxFileSize: "File is too big",
minFileSize: "File is too small",
acceptFileTypes: "Filetype not allowed",
maxNumberOfFiles: "Too many files",
uploadedBytes: "Uploaded bytes exceed file size",
emptyResult: "Empty file upload result"
},
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
//url: 'AJAX.ashx',
url: 'http://jquery-file-upload.appspot.com/',
dataType: 'json',
disableImageLoad: true,
headers: {
Accept: "application/json"
},
accept: 'application/json',
maxFileSize: 10000000, //5mb
maxNumberOfFiles: 5,
sequentialUploads: true,
//singleFileUploads: false,
//resizeMaxWidth: 1920,
//resizeMaxHeight: 1200,
//acceptFileTypes: /(.|\/)(gif|jpe?g|png|pdf)$/i,
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function(o) {
var rows = $();
$.each(o.files, function(index, file) {
var row = $('<li class="template-upload fade upload-file">' +
'<div class="upload-progress-bar progress" style="width: 0%;"></div>' +
'<div class="upload-file-info">' +
'<div class="filename-col"><span class="filename"></span></div>' +
'<div class="filesize-col"><span class="size"></span></div>' +
'<div class="error-col"><span class="error field-validation-error"></span></div>' +
'<div class="actions-col">' +
'<button class="btn btn-xs btn-danger cancel removeFile" data-toggle="tooltip" data-placement="left" title=""...