You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
9.4 KiB
277 lines
9.4 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # Bootstrap multiple file uploader
|
||
|
|
*
|
||
|
|
* Specific JS code additions for uploader_bootstrap.html page
|
||
|
|
*
|
||
|
|
* Version: 1.2
|
||
|
|
* Latest update: Aug 10, 2016
|
||
|
|
*
|
||
|
|
* ---------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
//
|
||
|
|
// Define variables
|
||
|
|
//
|
||
|
|
|
||
|
|
// Modal template
|
||
|
|
var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' +
|
||
|
|
' <div class="modal-content">\n' +
|
||
|
|
' <div class="modal-header">\n' +
|
||
|
|
' <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
|
||
|
|
' <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\n' +
|
||
|
|
' </div>\n' +
|
||
|
|
' <div class="modal-body">\n' +
|
||
|
|
' <div class="floating-buttons btn-group"></div>\n' +
|
||
|
|
' <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
|
||
|
|
' </div>\n' +
|
||
|
|
' </div>\n' +
|
||
|
|
'</div>\n';
|
||
|
|
|
||
|
|
// Buttons inside zoom modal
|
||
|
|
var previewZoomButtonClasses = {
|
||
|
|
toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
|
||
|
|
fullscreen: 'btn btn-default btn-icon btn-xs',
|
||
|
|
borderless: 'btn btn-default btn-icon btn-xs',
|
||
|
|
close: 'btn btn-default btn-icon btn-xs'
|
||
|
|
};
|
||
|
|
|
||
|
|
// Icons inside zoom modal classes
|
||
|
|
var previewZoomButtonIcons = {
|
||
|
|
prev: '<i class="icon-arrow-left32"></i>',
|
||
|
|
next: '<i class="icon-arrow-right32"></i>',
|
||
|
|
toggleheader: '<i class="icon-menu-open"></i>',
|
||
|
|
fullscreen: '<i class="icon-screen-full"></i>',
|
||
|
|
borderless: '<i class="icon-alignment-unalign"></i>',
|
||
|
|
close: '<i class="icon-cross3"></i>'
|
||
|
|
};
|
||
|
|
|
||
|
|
// File actions
|
||
|
|
var fileActionSettings = {
|
||
|
|
zoomClass: 'btn btn-link btn-xs btn-icon',
|
||
|
|
zoomIcon: '<i class="icon-zoomin3"></i>',
|
||
|
|
dragClass: 'btn btn-link btn-xs btn-icon',
|
||
|
|
dragIcon: '<i class="icon-three-bars"></i>',
|
||
|
|
removeClass: 'btn btn-link btn-icon btn-xs',
|
||
|
|
removeIcon: '<i class="icon-trash"></i>',
|
||
|
|
indicatorNew: '<i class="icon-file-plus text-slate"></i>',
|
||
|
|
indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
|
||
|
|
indicatorError: '<i class="icon-cross2 text-danger"></i>',
|
||
|
|
indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>'
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Basic example
|
||
|
|
//
|
||
|
|
|
||
|
|
$('.file-input').fileinput({
|
||
|
|
browseLabel: 'Browse',
|
||
|
|
browseIcon: '<i class="icon-file-plus"></i>',
|
||
|
|
uploadIcon: '<i class="icon-file-upload2"></i>',
|
||
|
|
removeIcon: '<i class="icon-cross3"></i>',
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
initialCaption: "No file selected",
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons,
|
||
|
|
fileActionSettings: fileActionSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Custom layout
|
||
|
|
//
|
||
|
|
|
||
|
|
$('.file-input-custom').fileinput({
|
||
|
|
previewFileType: 'image',
|
||
|
|
browseLabel: 'Select',
|
||
|
|
browseClass: 'btn bg-slate-700',
|
||
|
|
browseIcon: '<i class="icon-image2 position-left"></i> ',
|
||
|
|
removeLabel: 'Remove',
|
||
|
|
removeClass: 'btn btn-danger',
|
||
|
|
removeIcon: '<i class="icon-cancel-square position-left"></i> ',
|
||
|
|
uploadClass: 'btn bg-teal-400',
|
||
|
|
uploadIcon: '<i class="icon-file-upload position-left"></i> ',
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
initialCaption: "Please select image",
|
||
|
|
mainClass: 'input-group',
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons,
|
||
|
|
fileActionSettings: fileActionSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Template modifications
|
||
|
|
//
|
||
|
|
|
||
|
|
$('.file-input-advanced').fileinput({
|
||
|
|
browseLabel: 'Browse',
|
||
|
|
browseClass: 'btn btn-default',
|
||
|
|
removeClass: 'btn btn-default',
|
||
|
|
uploadClass: 'btn bg-success-400',
|
||
|
|
browseIcon: '<i class="icon-file-plus"></i>',
|
||
|
|
uploadIcon: '<i class="icon-file-upload2"></i>',
|
||
|
|
removeIcon: '<i class="icon-cross3"></i>',
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
main1: "{preview}\n" +
|
||
|
|
"<div class='input-group {class}'>\n" +
|
||
|
|
" <div class='input-group-btn'>\n" +
|
||
|
|
" {browse}\n" +
|
||
|
|
" </div>\n" +
|
||
|
|
" {caption}\n" +
|
||
|
|
" <div class='input-group-btn'>\n" +
|
||
|
|
" {upload}\n" +
|
||
|
|
" {remove}\n" +
|
||
|
|
" </div>\n" +
|
||
|
|
"</div>",
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
initialCaption: "No file selected",
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons,
|
||
|
|
fileActionSettings: fileActionSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Custom file extensions
|
||
|
|
//
|
||
|
|
|
||
|
|
$(".file-input-extensions").fileinput({
|
||
|
|
browseLabel: 'Browse',
|
||
|
|
browseClass: 'btn btn-primary',
|
||
|
|
uploadClass: 'btn btn-default',
|
||
|
|
browseIcon: '<i class="icon-file-plus"></i>',
|
||
|
|
uploadIcon: '<i class="icon-file-upload2"></i>',
|
||
|
|
removeIcon: '<i class="icon-cross3"></i>',
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
maxFilesNum: 10,
|
||
|
|
allowedFileExtensions: ["jpg", "gif", "png", "txt"],
|
||
|
|
initialCaption: "No file selected",
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons,
|
||
|
|
fileActionSettings: fileActionSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Always display preview
|
||
|
|
//
|
||
|
|
|
||
|
|
$(".file-input-preview").fileinput({
|
||
|
|
browseLabel: 'Browse',
|
||
|
|
browseIcon: '<i class="icon-file-plus"></i>',
|
||
|
|
uploadIcon: '<i class="icon-file-upload2"></i>',
|
||
|
|
removeIcon: '<i class="icon-cross3"></i>',
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
initialPreview: [
|
||
|
|
"assets/images/demo/images/1.png",
|
||
|
|
"assets/images/demo/images/2.png",
|
||
|
|
],
|
||
|
|
initialPreviewConfig: [
|
||
|
|
{caption: "Jane.jpg", size: 930321, key: 1, showDrag: false},
|
||
|
|
{caption: "Anna.jpg", size: 1218822, key: 2, showDrag: false}
|
||
|
|
],
|
||
|
|
initialPreviewAsData: true,
|
||
|
|
overwriteInitial: false,
|
||
|
|
maxFileSize: 100,
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons,
|
||
|
|
fileActionSettings: fileActionSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Display preview on load
|
||
|
|
//
|
||
|
|
|
||
|
|
$(".file-input-overwrite").fileinput({
|
||
|
|
browseLabel: 'Browse',
|
||
|
|
browseIcon: '<i class="icon-file-plus"></i>',
|
||
|
|
uploadIcon: '<i class="icon-file-upload2"></i>',
|
||
|
|
removeIcon: '<i class="icon-cross3"></i>',
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
initialPreview: [
|
||
|
|
"assets/images/demo/images/1.png",
|
||
|
|
"assets/images/demo/images/2.png"
|
||
|
|
],
|
||
|
|
initialPreviewConfig: [
|
||
|
|
{caption: "Jane.jpg", size: 930321, key: 1, showDrag: false},
|
||
|
|
{caption: "Anna.jpg", size: 1218822, key: 2, showDrag: false}
|
||
|
|
],
|
||
|
|
initialPreviewAsData: true,
|
||
|
|
overwriteInitial: true,
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons,
|
||
|
|
fileActionSettings: fileActionSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// AJAX upload
|
||
|
|
//
|
||
|
|
|
||
|
|
$(".file-input-ajax").fileinput({
|
||
|
|
uploadUrl: "http://localhost", // server upload action
|
||
|
|
uploadAsync: true,
|
||
|
|
maxFileCount: 5,
|
||
|
|
initialPreview: [],
|
||
|
|
fileActionSettings: {
|
||
|
|
removeIcon: '<i class="icon-bin"></i>',
|
||
|
|
removeClass: 'btn btn-link btn-xs btn-icon',
|
||
|
|
uploadIcon: '<i class="icon-upload"></i>',
|
||
|
|
uploadClass: 'btn btn-link btn-xs btn-icon',
|
||
|
|
indicatorNew: '<i class="icon-file-plus text-slate"></i>',
|
||
|
|
indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
|
||
|
|
indicatorError: '<i class="icon-cross2 text-danger"></i>',
|
||
|
|
indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>',
|
||
|
|
},
|
||
|
|
layoutTemplates: {
|
||
|
|
icon: '<i class="icon-file-check"></i>',
|
||
|
|
modal: modalTemplate
|
||
|
|
},
|
||
|
|
initialCaption: "No file selected",
|
||
|
|
previewZoomButtonClasses: previewZoomButtonClasses,
|
||
|
|
previewZoomButtonIcons: previewZoomButtonIcons
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Misc
|
||
|
|
//
|
||
|
|
|
||
|
|
// Disable/enable button
|
||
|
|
$("#btn-modify").on("click", function() {
|
||
|
|
$btn = $(this);
|
||
|
|
if ($btn.text() == "Disable file input") {
|
||
|
|
$("#file-input-methods").fileinput("disable");
|
||
|
|
$btn.html("Enable file input");
|
||
|
|
alert("Hurray! I have disabled the input and hidden the upload button.");
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#file-input-methods").fileinput("enable");
|
||
|
|
$btn.html("Disable file input");
|
||
|
|
alert("Hurray! I have reverted back the input to enabled with the upload button.");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|