[RAILS] Implémentation de la fonction de prévisualisation d'image

Implémentation de la fonction de prévisualisation d'image dans les rails

environnement Rails 5.2.4.4

** Supposition ** Colonne image_id dans la table utilisateur

procédure ① Donnez un identifiant à image_tag Donnez un identifiant à traiter avec JavaScript. Ici, ʻid: "img_prev" ʻest utilisé.

<%= attachment_image_tag @user, :image, size: "300x300", fallback: "no_profile.jpg ", size: "300x300" , id: "img_prev"%>

② Écrivez JavaScript en bas de page Lorsque la valeur du champ du fichier image change Lisez l'URL du fichier image avec image_tag et affichez l'image.


<script>
$(function(){                                         
    $('#user_image').on('change', function (e) {        #Obtenir des informations de l'identifiant
    var reader = new FileReader();　　　　　　　　　　　　#Obtenir l'URL de l'image existante
    reader.onload = function (e) {
        $(".image").attr('src', e.target.result);
    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　#C'est pour l'acquisition d'images
    reader.readAsDataURL(e.target.files[0]);　　　　　   #Insérez l'url de l'image téléchargée dans l'url obtenue
});
});

</script>

Avec ce qui précède, la fonction de prévisualisation d'image a été implémentée.

Recommended Posts

Implémentation de la fonction de prévisualisation d'image
[Rails] Implémentation de la fonction de prévisualisation d'image
Implémentation de la fonction de prévisualisation d'image
Implémentation de la fonction de recherche
Mise en œuvre de la fonction de pagénation
[Rails] Implémentation de la fonction d'agrandissement d'image à l'aide de lightbox2
Implémentation de la fonction de recherche séquentielle
Implémentation d'une fonction similaire (Ajax)
[Rails] Implémentation de la fonction de catégorie
Mise en œuvre de la fonction déroulante de catégorie
[Rails] Implémentation de la fonction tutoriel
[Rails] Implémentation d'une fonction similaire
[Rails] Implémentation de la fonction d'importation CSV
[Rails] À propos de la mise en œuvre de la fonction similaire
[Rails] Implémentation de la fonction de retrait utilisateur
[Rails] Implémentation de la fonction d'exportation CSV
Implémentation d'une fonction similaire en Java
Implémentation de la fonction d'authentification des utilisateurs à l'aide de devise (2)
Implémentation de la fonction DM
Implémentation de la fonction d'authentification des utilisateurs à l'aide de devise (1)
Rails [Pour les débutants] Implémentation de la fonction de commentaire
Implémentation de la fonction d'authentification des utilisateurs à l'aide de devise (3)
[Ruby on rails] Implémentation d'une fonction similaire
Implémentation de la fonction de connexion Ruby on Rails (Session)
[JQuery] Procédure d'implémentation de la fonction de saisie semi-automatique [Java / Spring]
Mise en place de la fonction de recherche Mémo d'apprentissage (création de portfolio)
[Rails] Implémentation du diaporama d'images à l'aide de Bootstrap 3
Implémentation de la fonction de suppression (si vous avez une clé étrangère)
Implémentation de la fonction de commentaire (Ajax)
Suivez l'implémentation de la fonction (Ajax)
Implémentation appliquée de l'espace de chat
Fonction de recherche [implémentation copier-coller]
[Procédure de mise en œuvre] Implémentez la fonction de téléchargement d'images avec Active Storage
Implémentation de la fonction de connexion Ruby on Rails (édition de devise)
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "Préparation"
[Rails] Implémentation de la fonction de catégorie multicouche à l'aide de l'ascendance "seed edition"
[Ruby on Rails] Fonction de prévisualisation de l'image dans le fichier
Ajout de la fonction de connexion invité
À propos de l'implémentation du traitement de fusion, y compris la fonction de tri de l'API Stream
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "Edit Form Edition"
Implémentation de la fonction de recherche floue Rails
[Rails] Implémentation de la fonction de catégorie multicouche à l'aide de l'ascendance "Formulaire de création"
[Java] Implémentation du réseau Faistel
Implémentation de XLPagerTabStrip avec TabBarController
Mise en place de la fonction de tri des rails (affichés par ordre de nombre de like)