https://xn--b1aebcldblgh2abw8afd8ds.xn--p1ai/web/java/bootstrap.file-input.js

1/*
2  Bootstrap - File Input
3  ======================
4
5  This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.
6
7  Converts all
8  <input type="file">
9  into Bootstrap buttons
10  <a class="btn">Browse</a>
11
12*/
13(function($) {
14$.fn.bootstrapFileInputDeselectFile = function(label = 'Выберите файл') {
15
16	$(this).attr("title","").val("").parent().find("span").html(label);
17
18}
19
20$.fn.bootstrapFileInput = function(label = 'Выберите файл') {
21
22  this.each(function(i,elem){
23
24    var $elem = $(elem);
25
26
27    // Maybe some fields don't need to be standardized.
28    if (typeof $elem.attr('data-bfi-disabled') != 'undefined') {
29      return;
30    }
31
32    // Set the word to be displayed on the button
33    var buttonWord = label;
34
35    if (typeof $elem.attr('title') != 'undefined') {
36      buttonWord = $elem.attr('title');
37    }
38
39    var className = '';
40
41    if (!!$elem.attr('class')) {
42      className = ' ' + $elem.attr('class');
43    }
44
45    // Now we're going to wrap that input field with a Bootstrap button.
46    // The input will actually still be there, it will just be float above and transparent (done with the CSS).
47    $elem.wrap('<a class="file-input-wrapper btn btn-default ' + className + '"></a>').parent().prepend($('<span></span>').html(buttonWord));
48  })
49
50  // After we have found all of the file inputs let's apply a listener for tracking the mouse movement.
51  // This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.
52  .promise().done( function(){
53
54    // As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.
55    // This gives us the pointer cursor that FF denies us
56    $('.file-input-wrapper').mousemove(function(cursor) {
57
58      var input, wrapper,
59        wrapperX, wrapperY,
60        inputWidth, inputHeight,
61        cursorX, cursorY;
62
63      // This wrapper element (the button surround this file input)
64      wrapper = $(this);
65      // The invisible file input element
66      input = wrapper.find("input");
67      // The left-most position of the wrapper
68      wrapperX = wrapper.offset().left;
69      // The top-most position of the wrapper
70      wrapperY = wrapper.offset().top;
71      // The with of the browsers input field
72      inputWidth= input.width();
73      // The height of the browsers input field
74      inputHeight= input.height();
75      //The position of the cursor in the wrapper
76      cursorX = cursor.pageX;
77      cursorY = cursor.pageY;
78
79      //The positions we are to move the invisible file input
80      // The 20 at the end is an arbitrary number of pixels that we can shift the input such that cursor is not pointing at the end of the Browse button but somewhere nearer the middle
81      moveInputX = cursorX - wrapperX - inputWidth + 20;
82      // Slides the invisible input Browse button to be positioned middle under the cursor
83      moveInputY = cursorY- wrapperY - (inputHeight/2);
84
85      // Apply the positioning styles to actually move the invisible file input
86      input.css({
87        left:moveInputX,
88        top:moveInputY
89      });
90    });
91
92    $('body').on('change', '.file-input-wrapper input[type=file]', function(){
93
94	
95	var typeFile = $(this).get(0).files[0].type;
96	var sizeFile = $(this).get(0).files[0].size;
97	var nameFile = $(this).get(0).files[0].name;
98	var arr = nameFile.split('.');
99	var ext = arr.length > 0 ? arr[arr.length - 1]:'' ;
100	//alert(typeFile);
101	if($(this).attr('content') == 'foto')
102	{
103		if(!(typeFile == 'image/jpeg' || typeFile == 'image/png' || typeFile == 'image/gif') || sizeFile > 2000000)
104		{
105			$(this).val('');
106			alert("Загружайте пожалуйста только изображения размером не более 2 МБ форматов jpeg , png , gif");			
107		}
108	}
109	if($(this).attr('content') == 'video')
110	{
111		if(!(typeFile == 'video/x-flv' || typeFile == 'video/mp4' || typeFile == 'video/quicktime') || sizeFile > 50000000)
112		{
113			$(this).val('');
114			alert("Загружайте пожалуйста только видео размером не более 50 МБ \nДопустимые форматы: FLV , MP4 , F4V \nДопустимые видео-кодеки: H.264 , FLV \nДопустимые аудио-кодеки: MP3 , AAC \nДопустимые расширения файлов: .flv , .mp4 , .mov , .m4v , .f4v");			
115		}
116	}
117	if($(this).attr('content') == 'file')
118	{
119
120		if(!(typeFile == 'application/msword'
121			|| typeFile == 'application/vnd.ms-word.document.macroEnabled.12'
122			|| typeFile == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
123			|| typeFile == 'application/vnd.ms-excel'
124			|| typeFile == 'application/vnd.ms-excel.sheet.macroEnabled.12'
125			|| typeFile == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
126			|| typeFile == 'application/vnd.ms-powerpoint'
127			|| typeFile == 'application/vnd.ms-powerpoint.presentation.macroEnabled.12'
128			|| typeFile == 'application/vnd.ms-powerpoint.slideshow.macroEnabled.12'
129			|| typeFile == 'application/vnd.openxmlformats-officedocument.presentationml.slideshow'
130			|| typeFile == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
131			|| typeFile == 'application/pdf'
132			|| typeFile == 'application/vnd.oasis.opendocument.text'
133			|| typeFile == 'application/vnd.oasis.opendocument.spreadsheet'
134			|| typeFile == 'application/vnd.oasis.opendocument.presentation'
135			|| typeFile == 'application/multipart/related'
136			|| typeFile == 'application/x-zip-compressed'
137			|| typeFile == 'text/plain'
138			|| ext == 'rar' || ext == 'zip' || ext == '7z'
139			) 
140			|| sizeFile > 30000000)
141		{	
142			$(this).val('');
143			alert("Загружайте пожалуйста только \nMicrosoft Office или OpenOffice текстовые док

143ументы, \ntxt файлы, \nэлектронные таблицы, презентации; \nPDF документы; \nархивы ZIP , RAR , 7Z \nразмером не более 30 МБ ");			
144		}
145	}
146
147      var fileName;
148      fileName = $(this).val();
149
150      // Remove any previous file names
151      $(this).parent().next('.file-input-name').remove();
152      if (!!$(this).prop('files') && $(this).prop('files').length > 1) {
153        fileName = $(this)[0].files.length+' files';
154      }
155      else {
156        fileName = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length);
157      }
158
159      // Don't try to show the name if there is none
160      if (!fileName) {
161        return;
162      }
163
164      var selectedFileNamePlacement = $(this).data('filename-placement');
165      if (selectedFileNamePlacement === 'inside') {
166        // Print the fileName inside
167        $(this).siblings('span').html(fileName + ' <span onclick="$(this).parent().siblings(\'input\').bootstrapFileInputDeselectFile();event.stopPropagation()" style="z-index:100" class="fa fa-times"></span>');
168        $(this).attr('title', fileName);
169      } else {
170        // Print the fileName aside (right after the the button)
171        $(this).parent().after('<span class="file-input-name">'+fileName+'</span>');
172      }
173    });
174
175  });
176
177};
178
179// Add the styles before the first stylesheet
180// This ensures they can be easily overridden with developer styles
181var cssHtml = '<style>'+
182  '.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+
183  '.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+
184  '.file-input-name { margin-left: 8px; }'+
185  '</style>';
186$('link[rel=stylesheet]').eq(0).before(cssHtml);
187
188})(jQuery);