Ändern der Standard - "Datei auswählen" - button Schienen

HTML

Etwas, das Sie wissen müssen, ist dies nicht eine Rails Problem - es ist ein HTML ein. Obwohl es ist möglich, es ist mehr ein hack als eine echte Anpassung

Ein gutes Beispiel ist eine demo, die wir hier gemacht
(Sie müssen sich registrieren & klicken Sie auf den "Profil" - button oben rechts):

Anpassen der file input - Taste ist nicht wirklich lebensfähig, wie Sie möchten - im Grunde muss man ausblenden der Schaltfläche & ersetzen Sie es mit Ihrem eigenen element, die dann an ein JS-event.

--

Methoden

Pavan geschrieben ein Epos JSFiddle in die Kommentare - props an ihn!!!

Verwendeten wir jquery-file-upload für unseren button - im Grunde ermöglicht uns, wählen Sie die Datei & gleichzeitig hochgeladen werden. Wirklich erstaunlich:

#app/views/your_controller/view.html.erb
<div class="avatar">        
        <!-- New Avatar Upload Form -->
        <%= form_for :upload, :html => {:multipart => true, :id => "avatar"}, :method => :put, url: profile_path(current_user.id), "data_id" => current_user.id do |f| %>
            <div class="btn btn-success fileinput-button avatar" id="avatar_container">
                <%= f.file_field :avatar, :title => "Upload New" %>
                <%= image_tag(@user.profile.avatar.url, :width=> '100%', :id => "avatar_img", :alt => name?(@user)) %>
            </div>
        <% end %>
 </div>

#app/assets/javascripts/application.js -> allows to upload directly (no submit)
$('#avatar').fileupload({

    url: '/profile/' + $(this).attr('data_id'),
    dataType: 'json',
    type: 'post',

    add: function (e, data) {
        //$(".items .avatar .avatar").prepend('<div class="loading" id="avatar_loading"><img src="<%= asset_path("profile/avatar_loading.gif") %>"></div>');
        //$('#avatar_loading').fadeIn('100');
        $(this).avatar_loading('avatar_loading');
        data.submit();
    },
    success: function (data, status) {;
        $("#avatar_img").fadeOut('fast', function() {
            $(this).attr("src", data.avatar_url).fadeIn('fast', function(){
                $(this).avatar_loading('avatar_loading');
            });
        });
    }

});