web-dev-qa-db-ja.com

Bootstrap in Rails 3を使用したsimple_form_forのスタイルファイルアップロードボタン

Simple_form_forを使用すると、Bootstrap and Rails 3。

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

「ファイルを選択」ボタンが別のクラス（ 'btn btn-primary'）を持つことができるように、これをどのようにスタイルするかわかりません。

さらに、Bootstrapで少なくとも使用すると、デフォルトで大幅にずれます。添付画像を参照してください。

最後に、まだ追加されていない場合にテキストを「ファイルが選択されていません」から「ファイルを選択」に再定義し、追加されている場合はファイル名を表示するにはどうすればよいですか。

enter image description here

ruby-on-railsfile-uploadtwitter-bootstrapsimple-form
13
tibbon

これが私のやり方です：

  1. ビューでフォームファイルフィールドを追加して非表示にします
  2. ファイル名を表示するためだけにスタイル付きの追加フィールドを追加する

  3. ファイル参照ダイアログをトリガーするボタンを追加する

    <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 -->

  4. JS（表示された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()
23
BSB

これは私にとってはうまくいき、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>
13
Yoko

私は遭遇し、 JasnyのBootstrap 3 の拡張機能を使用しています。これまでのところうまくいくようです。

6
kross

JSは不要、単純なCSS

scss

.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 /スリム

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

ブラウザ間の互換性のためにコンパスの使用をお勧めします

4
Max

すべてのブラウザには異なるタイプのファイル入力フィールドボタンがあり、これが面倒です。あなたはcssで少し遊ぶことができます。これにより、chromeおよびSafary：

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

それ以外の場合の最善の解決策は、それを非表示にして、クリックを遮断する偽の1つを表示することです。

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を使用して次のことを行うことです。

  1. Cssで迷惑な「ファイルが選択されていませんテキスト」を非表示にします。
  2. ボタンの横に「ファイルを選択してください」というテキストを配置し、参照できるクラスを割り当てます。
  3. テキストを「アップロードされたファイル」に置き換えます
2
joscas

@rafaelfrancaが言ったように、file入力をスタイルすることはできませんが、非表示の元のボタンをクリックする独自のボタンを追加できます。こちらの例をご覧ください http://jsfiddle.net/rUdf2/6/

2
Vasiliy Ermolovich

派手なシズは必要ありません：

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);
      });
});

注意：問題の3つのフォーム要素は互いに兄弟である必要があります（.image-file-chosen、.image-file-button、.image-file）

0
mattdlockyer

Bootstrap、Simple Forms、Jasny、およびReFileを使用している場合、この投稿に興味があるかもしれません refile simple_form undefined method attachment_field

0
Chris Hough