ファイルのカスタマイズボタンruby on rails

Question

私はファイルアップロードのデフォルトとして醜いボタンのレールを取り除こうとしています。私はglyphicon

<%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %> 

これは動作しませんでしたし、私はこのページで見た別のポストで他のものを試してみましたを追加したいが、彼らは、ファイルを添付しないでください。

Answer 1

ここに示すように、Bootstrap Filestyleでは、ブートストラップのファイルスタイルを使用してファイルアップロードボタンのスタイルを設定できます。

ステップ-1：あなたのレイアウトにapplication.html.erb

これを追加私はCDNからブートストラップFilestyleライブラリを追加しました。 JQueryとBoostrapの両方がロードされていることを確認する必要があります。

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script> 

ステップ-2：は、対応するjsファイルにこれを追加します。

$(":file").filestyle({input: false}); 

ステップ-3：はその後、あなたのimage_urlファイルのフィールドは、次のように次のようになります。

<%= f.file_field :image_url,class: "filestyle", "data-input" => false %> 

Answer 2

ご利用いただけます： -

add file field and hide this field :- 
    <%= f.file_field :image_url ,:onchange=>"loadFile(event)",id: "upload-it", class: "hide_input"%> 

add one div with class:"glyphicon glyphicon-camera" :- 
<div class="glyphicon glyphicon-camera" id="image-output",:onclick="upload_it(event)"></div> 

use script:- 
<script> 
    var loadFile = function(event) { 
    var output = document.getElementById('image-output'); 
    output.src = URL.createObjectURL(event.target.files[0]); 
    }; 
    function upload_it(){ 
    $("#upload-it").click(); 
    }; 
</script> 

Answer 3

これはcssを使用して行うことができます。

HTML：

<div class="image-upload"> 
    <label for="file-input"> 
    <span class="glyphicon glyphicon-camera"></span> 
    </label> 

    <%= f.file_field :image_url, id:"file-input" %> 
</div> 

CSS：

.image-upload > input 
{ 
    display: none; 
} 
.image-upload > label{ 
    cursor:pointer; 
} 

あなたは実施例にhere