[JAVA] [JQuery] Comment afficher l'image sélectionnée sous forme d'aperçu immédiat + Ajouter une gemme de publication d'image

Image complète

--Sélectionnez une image. --Afficher un aperçu avant d'enregistrer des images dans DB. ** Si vous souhaitez voir uniquement la fonction d'aperçu, veuillez lire uniquement le paramètre de JQuery ci-dessous **

environnement

ruby 2.5.7 rails 5.2.4.3 Il est possible de définir jQuery.

Gemme de publication d'image

Cette fois, nous utiliserons "Refile". Refile est une bibliothèque de téléchargement de fichiers pour les applications. ** Refile a les caractéristiques suivantes. ** **

-Les images peuvent être facilement incorporées. -Peut générer des vignettes. -Vous pouvez définir la destination de téléchargement du fichier.

De plus, cette fois, nous ajoutons également une gemme (MiniMagick) qui effectue un traitement d'image tel que l'ajustement de la taille.

Gemfile

...
 
#Gemme de publication d'image
gem "refile", require: "refile/rails", github: 'manfe/refile'
#Traitement d'image (ajustement de la taille, etc.)
gem "refile-mini_magick"

Lorsque vous ajoutez un gem, exécutez la commande d'installation du bundle.

Ajoutons une colonne pour l'image!

Ajoutez une colonne pour enregistrer l'image. Le nom de la colonne est défini avec un identifiant tel que "image_id". (Le type de données est une chaîne) Reflétons-le dans la base de données avec la commande suivante

python

$ rails db:migrate

Ajouter une méthode de pièce jointe

Pour utiliser Refile, vous devez ajouter une méthode d'attachement à votre modèle. La méthode de pièce jointe est requise pour que le nouveau fichier accède à la colonne spécifiée. Cela permet d'acquérir et de télécharger des images qui existent dans la base de données. Le nom de la colonne est image_id, mais _id n'est pas ajouté ici.

Écrivons dans le modèle

attachment :image

Ajouter aux paramètres forts

Veuillez ajouter une image. Sous> privé def nom arbitraire params.require (: nom du modèle) .permit (: nom de la colonne)

end Cette fois, ** image ** sera saisie dans le nom de la colonne

Afficher les paramètres du fichier

ruby:new.html.rb

 <%= form_for(modèle,url:Contient une URL ou un chemin) do |f| %>

      <div class="item-image">
        <%= attachment_image_tag from_Contient le modèle utilisé pour, :image, class: "img-square", fallback: "no_image.jpg ", size:"300x300" %>
      </div>

      <%= f.attachment_field :image, placeholder: "image" %>
    </div>
　　<%= f.submit "enregistrement"%>

Configurer JQuery

・ Cette fois, j'aimerais écrire