15

simple_form_for、Bootstrap、およびRailsの使用3.フォーム内：

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

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

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

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

ここに画像の説明を入力してください

4

9 に答える 9

13

これは私にとってはうまく機能し、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>
于 2016-07-11T08:34:33.257 に答える
6

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

于 2014-10-29T20:50:52.183 に答える
4

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

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

于 2014-11-04T13:51:54.460 に答える
2

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

于 2013-01-24T19:50:04.557 に答える
2

すべてのブラウザには異なる種類のファイル入力フィールド ボタンがあり、これが面倒です。cssで少し遊ぶことができます。これにより、Chrome と Safary で煩わしい「ファイルが選択されていません」というテキストなしで、JS を使用した基本的なスタイリングができました。

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

  1. cssで迷惑な「ファイルが選択されていないテキスト」を非表示にします。
  2. ボタンの横に「選択したファイル」テキストを配置し、参照できるクラスを指定します。
  3. テキストを「ファイルがアップロードされました」に置き換えます
于 2013-01-24T19:57:57.780 に答える
0

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

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

于 2013-03-21T16:52:08.680 に答える
0

Bootstrap、Simple Forms、Jasny、およびReFileを使用している場合、この投稿は興味深いかもしれません。

于 2016-02-09T22:07:39.767 に答える