Кнопка загрузки файла стиля для simple_form_for с Bootstrap в Rails 3

Использование simple_form_for, Bootstrap и Rails 3. В форме:

<%= f.input :upload, label: 'PDF file:' , input_html: {accept: ('application/pdf') } %>

Я не знаю, как бы это сделать, чтобы кнопка "выбрать файл" могла иметь другой класс ( "btn btn-primary" ).

Кроме того, при использовании с Bootstrap, по крайней мере, по умолчанию он сильно несогласован. См. Прикрепленное изображение.

Наконец, как переопределить текст из "Без файла" в "Выбор файла", когда еще нет ни одного добавленного файла, и покажите имя файла, если оно есть.

enter image description here

Ответы

Ответ 1

Вот как я это делаю:

  • В представлении добавьте поле формы формы и скройте его
  • Добавьте добавленное дополнительное поле только для отображения имени файла

  • Добавить кнопку, чтобы вызвать диалоговое окно просмотра файла

    <div class="control-group">
  <div class="attach-set">
    <%= f.input :real_file, input_html: { hidden: true }, label: 'Upload Attachment' %>
    <div class="input-append">
      <input id="file-display" class="input-large uneditable-input" type="text">
      <a id="upload-btn" class="btn"><i class="icon-upload-alt"></i> Browse</a>
    </div>
  </div> <!-- /attach-set -->
</div> <!-- /control-group -->

  • В представленном JS (Coffee w/jQuery) пропустите щелчок с кнопки дисплея на вход реального файла и когда они выберут файл, выведите имя файла в текстовое поле дисплея (я удаляю путь так, чтобы что я не вижу C:\FakePath....)

    $(document).ready ->

  # ------------------------------------------------------
  # pretty-fy the upload field
  # ------------------------------------------------------
  $realInputField = $('#real_file')

  # drop just the filename in the display field
  $realInputField.change ->
    $('#file-display').val $(@).val().replace(/^.*[\\\/]/, '')

  # trigger the real input field click to bring up the file selection dialog
  $('#upload-btn').click ->
    $realInputField.click()

Ответ 2

Это отлично подойдет для меня и требует только HTML

<label class="btn btn-primary">
  Add a file!
  <span style="display:none;">
    <%= f.file_field :image, required: true, multiple: true, name: 'picture' %>
  </span>
</label>

Ответ 4

Нет необходимости в JS, просто css

СКС

.fileinput-button {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
  width: 110px;
  height: 32px;
  input{
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(-300px, 0) scale(4);
    direction: ltr;
    cursor: pointer;
  } 
}

html/slim

span class="btn btn-success fileinput-button"
  i.fa.fa-pencil
  span
   |  Select File
  = f.file_field :cover_ar

Я рекомендую использовать компас для совместимости с несколькими браузерами

Ответ 5

Как сказал @rafaelfranca, вы не можете вписать file вход, но вы можете добавить свою собственную кнопку, которая будет нажимать на вашу скрытую оригинальную кнопку. Пример здесь http://jsfiddle.net/rUdf2/6/

Ответ 6

В каждом браузере есть кнопка ввода поля ввода другого типа, и это создает боль. Вы можете немного поиграть с css. Это дало мне базовый стиль с JS без раздражающего текста "Без файлов" в хроме и Safary:

$(document).ready(function() {
  $(".your_button").css("width", "80px");
});

В противном случае лучшим решением является скрыть его и показать поддельный, который перехватывает щелчок:

http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

В отношении вопроса о том, как показать, что файл был загружен, базовое решение с загрузкой файла jquery - это обнаружить событие завершения загрузки и заменить часть текста успешным сообщением (точное имя файла, которое я считаю его невозможно получить в современных браузерах):

$(".your_button").fileupload({
    dataType: "json",
    done: function(e, data) {
        $(".place_for_your_text").text("File uploaded.");
    }
});

Итак, основное решение - использовать javascript в ваших активах для:

  • Скрыть раздражающий "Нет файла, выбранного в тексте" с помощью css.
  • Поместите текст "Выберите файл" рядом с кнопкой и дайте ему класс, который вы можете указать.
  • Замените текст на "Загруженный файл"

Ответ 7

Никакой фантазии не требуется:

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-selected,.image-file-button,.image-file)