Implementation of image preview function

Implementation of image preview function in rails

environment Rails 5.2.4.4

** Premise ** image_id column in user table

procedure ① Give id to image_tag Give id for processing in JavaScript. Here, ʻid: "img_prev" `is used.

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

② Write JavaScript at the bottom of the page When the value of the image file field changes Read the URL of the image file with image_tag and display the image.


<script>
$(function(){                                         
    $('#user_image').on('change', function (e) {        #Get information from id
    var reader = new FileReader();            #Get existing image url
    reader.onload = function (e) {
        $(".image").attr('src', e.target.result);
    }                            #This is for image acquisition
    reader.readAsDataURL(e.target.files[0]);        #Insert the url of the uploaded image into the obtained url
});
});

</script>

The image preview function has been implemented.

Recommended Posts

Implementation of image preview function
[Rails] Implementation of image preview function
Image preview function implementation
Image preview function
Implementation of search function
Implementation of pagination function
[Rails] Implementation of image enlargement function using lightbox2
Implementation of sequential search function
Implementation of like function (Ajax)
[Rails] Implementation of category function
Implementation of category pull-down function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of CSV import function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Implementation of like function in Java
Implementation of user authentication function using devise (2)
DM function implementation
Image posting function
Implementation of user authentication function using devise (1)
Implementation of GKAccessPoint
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
Implementation of user authentication function using devise (3)
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Vue.js] Implementation of menu function Vue.js introduction rails6
Implementation of Ruby on Rails login function (Session)
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of retweet function in SNS application
[JQuery] Implementation procedure of AutoComplete function [Java / Spring]
Implementation of search function Learning memo (portfolio creation)
[Rails] Implementation of image slide show using Bootstrap 3
Implementation of delete function (if you have foreign_key)
Implementation of flash messages
Comment function (Ajax) implementation
Follow function (Ajax) implementation
Applied implementation of chat-space
Rails search function implementation
Search function [copype implementation]
Ruby on Rails <2021> Implementation of simple login function (form_with)
[Implementation procedure] Implement image upload function with Active Storage
Implementation of Ruby on Rails login function (devise edition)
[Ruby on Rails] Implementation of tagging function/tag filtering function
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Ruby on Rails] Post image preview function in refile
[Rails] Implementation of SNS authentication (Twitter, Facebook, Google) function
Addition of guest login function
About merge processing implementation including sorting function of Stream API
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Swift] Simple implementation of UIImageView
Rails fuzzy search function implementation
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Swift] Implementation of ultra-simple billing
Use ransack Search function implementation
[Java] Implementation of Faistel Network
Implementation of XLPagerTabStrip with TabBarController
Rails sorting function implementation (displayed in order of number of like)