[JAVA] Ersetzen Sie die Vorschau durch Hochladen, indem Sie auf das Bild in file_field of Rails klicken

Erste Stufe

Wenn Sie bootstrap_form verwenden, sind die folgenden Schritte erforderlich. Wenn Sie "bootstrap_form" verwenden, erstellt dieses Gem eine schöne Benutzeroberfläche, die jedoch in dieser Implementierung im Weg steht.

<%= f.file_field :image %>

Stellen Sie daher sicher, dass der Bootstrap-Stil nicht angewendet wird.

<%= f.file_field_without_bootstrap :image %>

Klicken Sie zum Hochladen auf das Bild

<%= f.label :image do %>
  <%= image_tag('user.png') %>
  <%= f.file_field_without_bootstrap :image, style: 'display:none' %>
<% end %>

Fügen Sie einfach das Bild und das Dateifeld in das Etikett ein und verstecken Sie das Dateifeld in CSS. Wenn Sie den Bildteil durch ein Symbol ersetzen, können Sie ihn hochladen, indem Sie auf das Symbol klicken.

Ersetzen Sie das angezeigte Bild durch das hochgeladene Bild

Dem Image und Uploader wurde ein geeigneter Klassenname hinzugefügt, damit das Element von JS bezogen werden kann.

<%= f.label :image do %>
  <%= image_tag('user.png', class: 'avatar') %>
  <%= f.file_field_without_bootstrap :image, class: 'uploader', style: 'display:none' %>
<% end %>

Codiert das in JavaScript ausgewählte Bild in base64 und ersetzt es durch das Originalbild.

window.addEventListener('load', () => {
    const uploader = document.querySelector('.uploader');
    uploader.addEventListener('change', (e) => {
      const file = uploader.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = reader.result;
        document.querySelector('.avatar').setAttribute('src', image);
      }
    });
});

• Eine Feineinstellung des Aussehens entfällt.
• Da das Bild gerade an der Rezeption ersetzt wurde, wird es erst dann an den Server gesendet, wenn das Formular gesendet wurde.