[JAVA] Cliquez sur l'image dans le champ file_field de Rails pour télécharger et remplacer l'aperçu

Première étape

Si vous utilisez bootstrap_form, les étapes suivantes sont requises. Si vous utilisez bootstrap_form, cette gemme créera une belle interface utilisateur, mais dans cette implémentation, elle vous gêne.

<%= f.file_field :image %>

スクリーンショット 2020-11-06 10.34.09.png

Assurez-vous donc que le style bootstrap n'est pas appliqué.

<%= f.file_field_without_bootstrap :image %>

スクリーンショット 2020-11-06 10.34.59.png

Cliquez sur l'image pour télécharger

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

Insérez simplement l'image et file_field dans label et masquez file_field dans CSS. Si vous remplacez la partie image par une icône, vous pouvez télécharger en cliquant sur l'icône.

Remplacez l'image affichée par l'image téléchargée

Ajout d'un nom de classe approprié à l'image et à l'uploader afin que l'élément puisse être obtenu à partir de JS.

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

Encode l'image sélectionnée dans JavaScript en base64 et la remplace par l'image d'origine.

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

Recommended Posts

Cliquez sur l'image dans le champ file_field de Rails pour télécharger et remplacer l'aperçu
[Rails] Implémentation de la fonction de prévisualisation d'image
L'identité des paramètres de rails [: id]
Rails6: Extraire l'image dans le texte d'action
Modifiez la destination d'enregistrement de l'image en S3 dans l'application Rails. Partie 2
[Order method] Définit l'ordre des données dans Rails
Comment passer à l'écran des détails en cliquant sur l'image
Traitement d'image: structure de base de l'image lue par le programme
[Ruby on Rails] Fonction de prévisualisation de l'image dans le fichier
SSL dans l'environnement local de Docker / Rails / puma
[Rails] Comment afficher les images dans la vue
[Enum] Utilisez des rails enum pour améliorer la lisibilité des données
[Rails] Enregistrez-vous par attribut du même modèle en utilisant Devise
Installer en spécifiant la version de Django dans l'environnement Docker
[Rails] Où faire attention dans la description de la validation
Image JavaFX-Load en arrière-plan
[Rails] Comment convertir l'URI de l'image envoyée par http en https lors de l'utilisation de l'API Twitter
[Rails] Supprimez le SQL inutile en utilisant le contrôle de cache des associations
J'ai essayé d'implémenter la fonction de prévisualisation d'image avec Rails / jQuery
Que faire si l'image publiée par refile disparaît après avoir défini la page d'erreur 404 dans Rails
[Rails] Introduction de Rubocop par les débutants
[Rails] Vérifiez le contenu de l'objet
Remplacez le contenu du fichier Jar
Explication de l'ordre des itinéraires ferroviaires
Vérifier l'état de migration des rails
Oui, prévisualisons l'image. ~ part5 ~
Ordre de traitement dans le programme
[Rails] Différence de comportement entre delegate et has_many-through dans le cas de one-to-one-to-many
Le problème que le contenu des paramètres est complètement affiché dans la vue [Rails]
[Rails] À propos de l'erreur selon laquelle l'image n'est pas affichée dans l'environnement de production
[Rails] Concernant la présence ou l'absence de parenthèses dans l'argument de la méthode de rendu
[Rails] La cause de l'impossibilité de publier des messages était form_with
Comment faire de https le schéma de l'URL générée par l'assistant d'URL de Rails