Твиттер Форме Кнопку Загрузчик Файл Загрузить Элемент
Почему нет необычной кнопки загрузки элемента файла для Twitter bootstrap? Было бы мило, если бы синяя основная кнопка была реализована для кнопки загрузки. Можно ли даже утончить кнопку загрузки с помощью CSS? (похоже, родной элемент браузера, который не может быть обработан)
24 ответов:
вот решение для Bootstrap 3 и 4.
чтобы сделать функциональный элемент управления вводом файлов, который выглядит как кнопка, вам нужен только HTML:
HTML
<label class="btn btn-default"> Browse <input type="file" hidden> </label>это работает во всех современных браузерах, включая IE9+. Если вам также нужна поддержка старого IE, используйте устаревший подход, показанный ниже.
эта техника опирается на HTML5 . Bootstrap 4 использует следующий CSS для прокладки этой функции в неподдерживаемые браузеры. Возможно, Вам потребуется добавить, если вы используете Bootstrap 3.
[hidden] { display: none !important; }
устаревший подход для старого IE
Если вам нужна поддержка IE8 и ниже, используйте следующий HTML / CSS:
HTML
<span class="btn btn-default btn-file"> Browse <input type="file"> </span>CSS
.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }обратите внимание, что старый IE не вызывает ввод файла при нажатии на
<label>, так что CSS "раздувать" делает пару вещей, чтобы обойти что:
- делает входной файл охватывать всю ширину / высоту окружающего
<span>- делает ввод файла невидимым
Обратная Связь И Дополнительное Чтение
я опубликовал более подробную информацию об этом методе, а также примеры того, как показать пользователю, какие/сколько файлов выбраны:
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
Я удивлен, что не было никакого упоминания о
<label>элемент.устранение:
<label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="file" style="display:none;"> Button Text Here </label>нет необходимости в каких-либо JS, или фанки css...
решение для включения имени файла:
<label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="file" style="display:none" onchange="$('#upload-file-info').html(this.files[0].name)"> Button Text Here </label> <span class='label label-info' id="upload-file-info"></span>решение выше требует jQuery.
без дополнительного плагина требуется, это загрузочное решение отлично работает для меня:
<div style="position:relative;"> <a class='btn btn-primary' href='javascript:;'> Choose File... <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'> </a> <span class='label label-info' id="upload-file-info"></span> </div>demo:
http://jsfiddle.net/haisumbhatti/cAXFA/1/ (bootstrap 2)
http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3)
он включен в вилку Джасни бутстрэпа.
простая кнопка загрузки может быть создана с помощью
<span class="btn btn-file">Upload<input type="file" /></span>С помощью плагина fileupload вы можете создавать более продвинутые виджеты. Взгляните на http://jasny.github.io/bootstrap/javascript/#fileinput
кнопки загрузки-это боль для стиля, потому что он стилизует вход, а не кнопку.
но вы можете использовать этот трюк:
http://www.quirksmode.org/dom/inputfile.html
резюме:
нормальный
<input type="file">и положил его в элементposition: relative.к этому же родительскому элементу добавьте нормальный
<input>и изображение, которое имеет правильные стили. Расположите эти элементы абсолютно, так что они занимают то же самое место, что и<input type="file">.задать Z-индекс
<input type="file">до 2 так, чтобы он лежал поверх стилизованного ввода/изображения.наконец, установите непрозрачность
<input type="file">к 0. Элемент<input type="file">теперь становится фактически невидимым, и стили ввода/изображения просвечивает, но вы все еще можете нажать на кнопку "Обзор". Если кнопка расположена в верхней части изображения, пользователь нажимает на изображение и получает обычное окно выбора файла. (Обратите внимание, что вы не можете использовать visibility: hidden, потому что по-настоящему невидимый элемент тоже не поддается клику, и нам нужно, чтобы он оставался кликабельным)
У меня работает:
обновление
// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ // Version: 0.0.3 // Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1 // Use: // <input class="nice_file_field" type="file" data-label="Choose Document"> // <script> $(".nice_file_field").niceFileField(); </script> // (function( $ ) { $.fn.niceFileField = function() { this.each(function(index, file_field) { file_field = $(file_field); var label = file_field.attr("data-label") || "Choose File"; file_field.css({"display": "none"}); nice_file_block_text = '<div class="input-group nice_file_block">'; nice_file_block_text += ' <input type="text" class="form-control">'; nice_file_block_text += ' <span class="input-group-btn">'; nice_file_block_text += ' <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>'; nice_file_block_text += ' </span>'; nice_file_block_text += '</div>'; file_field.after(nice_file_block_text); var nice_file_field_button = file_field.parent().find(".nice_file_field_button"); var nice_file_block_element = file_field.parent().find(".nice_file_block"); nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } ); file_field.change( function(){ nice_file_block_element.find("input").val(file_field.val()); }); }); }; })( jQuery );
упрощенный ответ с использованием частей из других ответов, в первую очередь user2309766 и dotcomsuperstar.
характеристики:
- использует кнопку Bootstrap аддон для кнопки и поля.
- только один вход; несколько входов будут подобраны формы.
- никаких дополнительных css, кроме " display: none;", чтобы скрыть ввод файла.
- видимая кнопка срабатывает нажмите событие для скрытого ввода файла.
splitдля удаления пути к файлу используется регулярное выражение и разделители '\' и '/'.код:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-group"> <span class="input-group-btn"> <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Browse</span> <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\|/]/).pop());" style="display: none;" type="file"> </span> <span class="form-control"></span> </div>
С некоторым вдохновением от других сообщений выше, вот полное решение, которое сочетает в себе то, что выглядит как поле управления формой с помощью ввода-группы-аддона для чистого виджета ввода файла, который включает ссылку на текущий файл.
.input-file { position: relative; margin: 60px 60px 0 } /* Remove margin, it is just for stackoverflow viewing */ .input-file .input-group-addon { border: 0px; padding: 0px; } .input-file .input-group-addon .btn { border-radius: 0 4px 4px 0 } .input-file .input-group-addon input { cursor: pointer; position:absolute; width: 72px; z-index:2;top:0;right:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0; background-color:transparent; color:transparent; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <div class="input-group input-file"> <div class="form-control"> <a href="/path/to/your/current_file_name.pdf" target="_blank">current_file_name.pdf</a> </div> <span class="input-group-addon"> <a class='btn btn-primary' href='javascript:;'> Browse <input type="file" name="field_name" onchange="$(this).parent().parent().parent().find('.form-control').html($(this).val());"> </a> </span> </div>
это прекрасно работает для меня
<span> <input type="file" style="visibility:hidden; width: 1px;" id='${multipartFilePath}' name='${multipartFilePath}' onchange="$(this).parent().find('span').html($(this).val().replace('C:\fakepath\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' --> <input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event --> <span class="badge badge-important" ></span> </span>
пожалуйста, проверьте Twitter Bootstrap File Input. Он использует очень простое решение, просто добавьте один файл javascript и вставьте следующий код:
$('input[type=file]').bootstrapFileInput();
простое решение с приемлемым исходом:
<input type="file" class="form-control">и стиль:
input[type=file].form-control { height: auto; }
Я создал пользовательскую кнопку загрузки, чтобы принимать только изображения, которые могут быть изменены в соответствии с вашим требованием.
надеюсь, что это помогает!! :)
(используется Bootstrap framework)
HTML
<center> <br /> <br /> <span class="head">Upload Button Re-Imagined</span> <br /> <br /> <div class="fileUpload blue-btn btn width100"> <span>Upload your Organizations logo</span> <input type="file" class="uploadlogo" /> </div> </center>CSS
.head { font-size: 25px; font-weight: 200; } .blue-btn:hover, .blue-btn:active, .blue-btn:focus, .blue-btn { background: transparent; border: solid 1px #27a9e0; border-radius: 3px; color: #27a9e0; font-size: 16px; margin-bottom: 20px; outline: none !important; padding: 10px 20px; } .fileUpload { position: relative; overflow: hidden; height: 43px; margin-top: 0; } .fileUpload input.uploadlogo { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 100%; height: 42px; } /*Chrome fix*/ input::-webkit-file-upload-button { cursor: pointer !important; }JS
// You can modify the upload files to pdf's, docs etc //Currently it will upload only images $(document).ready(function($) { // Upload btn $(".uploadlogo").change(function() { readURL(this); }); function readURL(input) { var url = input.value; var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); if (input.files && input.files[0] && (ext == "png" || ext == "jpeg" || ext == "jpg" || ext == "gif" || ext == "svg")) { var path = $('.uploadlogo').val(); var filename = path.replace(/^.*\/, ""); $('.fileUpload span').html('Uploaded logo : ' + filename); // console.log(filename); } else { $(".uploadlogo").val(""); $('.fileUpload span').html('Only Images Are Allowed!'); } } });
Это лучший стиль загрузки файлов, который мне нравится:
<div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input span3"><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>вы можете получить демо и стили в:
http://www.jasny.net/bootstrap/javascript/#fileinput
но используя это, вы должны заменить Twitter bootstrap на jasny bootstrap files..
С уважением.
/* * Bootstrap 3 filestyle * http://dev.tudosobreweb.com.br/bootstrap-filestyle/ * * Copyright (c) 2013 Markus Vinicius da Silva Lima * Обновление bootstrap 3 по Paulo Henrique Foxer * Версия 2.0.0 * Лицензия по лицензии MIT. * * /
(function ($) { "use strict"; var Filestyle = function (element, options) { this.options = options; this.$elementFilestyle = []; this.$element = $(element); }; Filestyle.prototype = { clear: function () { this.$element.val(''); this.$elementFilestyle.find(':text').val(''); }, destroy: function () { this.$element .removeAttr('style') .removeData('filestyle') .val(''); this.$elementFilestyle.remove(); }, icon: function (value) { if (value === true) { if (!this.options.icon) { this.options.icon = true; this.$elementFilestyle.find('label').prepend(this.htmlIcon()); } } else if (value === false) { if (this.options.icon) { this.options.icon = false; this.$elementFilestyle.find('i').remove(); } } else { return this.options.icon; } }, input: function (value) { if (value === true) { if (!this.options.input) { this.options.input = true; this.$elementFilestyle.prepend(this.htmlInput()); var content = '', files = []; if (this.$element[0].files === undefined) { files[0] = {'name': this.$element[0].value}; } else { files = this.$element[0].files; } for (var i = 0; i < files.length; i++) { content += files[i].name.split("\").pop() + ', '; } if (content !== '') { this.$elementFilestyle.find(':text').val(content.replace(/\, $/g, '')); } } } else if (value === false) { if (this.options.input) { this.options.input = false; this.$elementFilestyle.find(':text').remove(); } } else { return this.options.input; } }, buttonText: function (value) { if (value !== undefined) { this.options.buttonText = value; this.$elementFilestyle.find('label span').html(this.options.buttonText); } else { return this.options.buttonText; } }, classButton: function (value) { if (value !== undefined) { this.options.classButton = value; this.$elementFilestyle.find('label').attr({'class': this.options.classButton}); if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) { this.$elementFilestyle.find('label i').addClass('icon-white'); } else { this.$elementFilestyle.find('label i').removeClass('icon-white'); } } else { return this.options.classButton; } }, classIcon: function (value) { if (value !== undefined) { this.options.classIcon = value; if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) { this.$elementFilestyle.find('label').find('i').attr({'class': 'icon-white '+this.options.classIcon}); } else { this.$elementFilestyle.find('label').find('i').attr({'class': this.options.classIcon}); } } else { return this.options.classIcon; } }, classInput: function (value) { if (value !== undefined) { this.options.classInput = value; this.$elementFilestyle.find(':text').addClass(this.options.classInput); } else { return this.options.classInput; } }, htmlIcon: function () { if (this.options.icon) { var colorIcon = ''; if (this.options.classButton.search(/btn-inverse|btn-primary|btn-danger|btn-warning|btn-success/i) !== -1) { colorIcon = ' icon-white '; } return '<i class="'+colorIcon+this.options.classIcon+'"></i> '; } else { return ''; } }, htmlInput: function () { if (this.options.input) { return '<input type="text" class="'+this.options.classInput+'" style="width: '+this.options.inputWidthPorcent+'% !important;display: inline !important;" disabled> '; } else { return ''; } }, constructor: function () { var _self = this, html = '', id = this.$element.attr('id'), files = []; if (id === '' || !id) { id = 'filestyle-'+$('.bootstrap-filestyle').length; this.$element.attr({'id': id}); } html = this.htmlInput()+ '<label for="'+id+'" class="'+this.options.classButton+'">'+ this.htmlIcon()+ '<span>'+this.options.buttonText+'</span>'+ '</label>'; this.$elementFilestyle = $('<div class="bootstrap-filestyle" style="display: inline;">'+html+'</div>'); var $label = this.$elementFilestyle.find('label'); var $labelFocusableContainer = $label.parent(); $labelFocusableContainer .attr('tabindex', "0") .keypress(function(e) { if (e.keyCode === 13 || e.charCode === 32) { $label.click(); } }); // hidding input file and add filestyle this.$element .css({'position':'absolute','left':'-9999px'}) .attr('tabindex', "-1") .after(this.$elementFilestyle); // Getting input file value this.$element.change(function () { var content = ''; if (this.files === undefined) { files[0] = {'name': this.value}; } else { files = this.files; } for (var i = 0; i < files.length; i++) { content += files[i].name.split("\").pop() + ', '; } if (content !== '') { _self.$elementFilestyle.find(':text').val(content.replace(/\, $/g, '')); } }); // Check if browser is Firefox if (window.navigator.userAgent.search(/firefox/i) > -1) { // Simulating choose file for firefox this.$elementFilestyle.find('label').click(function () { _self.$element.click(); return false; }); } } }; var old = $.fn.filestyle; $.fn.filestyle = function (option, value) { var get = '', element = this.each(function () { if ($(this).attr('type') === 'file') { var $this = $(this), data = $this.data('filestyle'), options = $.extend({}, $.fn.filestyle.defaults, option, typeof option === 'object' && option); if (!data) { $this.data('filestyle', (data = new Filestyle(this, options))); data.constructor(); } if (typeof option === 'string') { get = data[option](value); } } }); if (typeof get !== undefined) { return get; } else { return element; } }; $.fn.filestyle.defaults = { 'buttonText': 'Escolher arquivo', 'input': true, 'icon': true, 'inputWidthPorcent': 65, 'classButton': 'btn btn-primary', 'classInput': 'form-control file-input-button', 'classIcon': 'icon-folder-open' }; $.fn.filestyle.noConflict = function () { $.fn.filestyle = old; return this; }; // Data attributes register $('.filestyle').each(function () { var $this = $(this), options = { 'buttonText': $this.attr('data-buttonText'), 'input': $this.attr('data-input') === 'false' ? false : true, 'icon': $this.attr('data-icon') === 'false' ? false : true, 'classButton': $this.attr('data-classButton'), 'classInput': $this.attr('data-classInput'), 'classIcon': $this.attr('data-classIcon') }; $this.filestyle(options); }); })(window.jQuery);
Я использую http://gregpike.net/demos/bootstrap-file-input/demo.html:
$('input[type=file]').bootstrapFileInput();или
$('.file-inputs').bootstrapFileInput();
решение для множественной загрузки
Я изменил два предыдущих ответа, чтобы включить несколько загрузок. Таким образом, метка показывает имя файла, если выбран только один, или
x filesв обратном случае.<label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="file" multiple="multiple" style="display:none" onchange="$('#upload-file-info').html( (this.files.length > 1) ? this.files.length + ' files' : this.files[0].name)"> Files… </label> <span class='label label-info' id="upload-file-info"></span>
Он также может применяться для изменения текста кнопки и класса.
<label class="btn btn-primary" for="multfile"> <input id="multfile" type="file" multiple="multiple" style="display:none" onchange="$('#multfile-label').html( (this.files.length == 1) ? this.files[0].name : this.files.length + ' files'); $(this).parent().addClass('btn-success')"> <span id="multfile-label">Files…</span> </label>
Я изменил @ claviska ответ и работает так, как мне нравится (Bootstrap 3, 4 не тестировался):
<label class="btn btn-default"> <span>Browse</span> <input type="file" style="display: none;" onchange="$(this).prev('span').text($(this).val()!=''?$(this).val():'Browse')"> </label>
следующий код делает как выше на картинке
Html
<form> <div class="row"> <div class="col-lg-6"> <label for="file"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Browse</button> </span> <input type="text" class="form-control" id="info" readonly="" style="background: #fff;" placeholder="Search for..."> </div><!-- /input-group --> </label> </div><!-- /.col-lg-6 --> </div> </div> <input type="file" style="display: none;" onchange="$('#info').val($(this).val().split(/[\|/]/).pop()); " name="file" id="file"> </form>Javascript
<script type="text/javascript"> $(function() { $("label[for=file]").click(function(event) { event.preventDefault(); $("#file").click(); }); }); </script>
не требуется причудливый шиз:
HTML:
<form method="post" action="/api/admin/image" enctype="multipart/form-data"> <input type="hidden" name="url" value="<%= boxes[i].url %>" /> <input class="image-file-chosen" type="text" /> <br /> <input class="btn image-file-button" value="Choose Image" /> <input class="image-file hide" type="file" name="image"/> <!-- Hidden --> <br /> <br /> <input class="btn" type="submit" name="image" value="Upload" /> <br /> </form>JS:
$('.image-file-button').each(function() { $(this).off('click').on('click', function() { $(this).siblings('.image-file').trigger('click'); }); }); $('.image-file').each(function() { $(this).change(function () { $(this).siblings('.image-file-chosen').val(this.files[0].name); }); });Внимание: три элемента формы, о которых идет речь, должны быть братьями и сестрами друг друга (.изображение-файл-выбрано, .изображение-файл-кнопка, .image-file)
у меня та же проблема, и я стараюсь это так.
<div> <button type='button' class='btn btn-info btn-file'>Browse</button> <input type='file' name='image'/> </div>CSS
<style> .btn-file { position:absolute; } </style>JS
<script> $(document).ready(function(){ $('.btn-file').click(function(){ $('input[name="image"]').click(); }); }); </script>Примечание. : Кнопка. btn-файл должен быть в том же теге, что и входной файл
Надеемся, вы нашли лучшее решение...
попробовать следующий в ушко В. 3.3.4
<div> <input id="uplFile" type="file" style="display: none;"> <div class="input-group" style="width: 300px;"> <div id="btnBrowse" class="btn btn-default input-group-addon">Select a file...</div> <span id="photoCover" class="form-control"> </div> </div> <script type="text/javascript"> $('#uplFile').change(function() { $('#photoCover').text($(this).val()); }); $('#btnBrowse').click(function(){ $('#uplFile').click(); }); </script>
вот альтернативный трюк, это не лучшее решение, но оно просто дает вам выбор
HTML-код:
<button clss="btn btn-primary" id="btn_upload">Choose File</button> <input id="fileupload" class="hide" type="file" name="files[]">Javascript:
$("#btn_upload").click(function(e){ e.preventDefault(); $("#fileupload").trigger('click'); });
в отношении ответа claviska - если вы хотите показать загруженное имя файла в базовой загрузке файла, вы можете сделать это в inputs'
onchangeсобытие. Просто используйте этот код:<label class="btn btn-default"> Browse... <span id="uploaded-file-name" style="font-style: italic"></span> <input id="file-upload" type="file" name="file" onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden> </label>этот код jQuery JS отвечает за извлечение загруженного имени файла:
$('#file-upload')[0].valueили с ванилью JS:
document.getElementById("file-upload").value
http://markusslima.github.io/bootstrap-filestyle/
$(":file").filestyle();или
<input type="file" class="filestyle" data-input="false">
Comments