[JAVA] [Rails] Implementation of image preview function

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionIntroduction of Bootstrap3Introduction of Font Awesome -Login function implementationImplementation of posting function

Implementation

1. Edit the view

slim:users/edit.html.slim


/Postscript
= f.file_field :profile_image, class: 'img_field', style: 'display:none;'
= attachment_image_tag @user, :profile_image, fallback: 'no-image.png', onClick: "$('.img_field').click()", class: 'center-block img-thumbnail img-responsive img_prev'
br

[Explanation]

(1) Hide file_field from display: none and assign a class.

= f.file_field :profile_image, class: 'img_field', style: 'display:none;'

(2) When the HTML (file_field) of the class assigned in (1) is clicked, JavaScript processing is executed.

onClick: "$('.img_field').click()"

2. Edit ʻapplication.scss`

appliacation.scss


//Postscript
.img_prev:hover {
  cursor: pointer; 
  opacity: 0.7;
  transform: scale(1.01, 1.01);
}

[Explanation]

① Reflect CSS when the mouse is on the image.

.img_prev:hover {}

② Change the mouse cursor to a pointer.

cursor: pointer; 

③ Lower the opacity and make the image a little whiter.

opacity: 0.7;

④ Enlarge the image a little.

transform: scale(1.01, 1.01);

3. Create / edit JavaScript file

Terminal


$ touch app/assets/javascripts/image_preview.js

image_preview.js


$(function () {
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  $('.img_field').change(function () {
    readURL(this);
  });
});

[Explanation]

(1) 1. The process of editing the view with (2).

$('.img_field').change(function () {
  readURL(this);
});

Recommended Posts

[Rails] Implementation of image preview function
Implementation of image preview function
Image preview function implementation
[Rails 6] Implementation of search function
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
Image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
[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 search function
Rails search function implementation
Implementation of pagination function
[Rails] Implementation of search function using gem's ransack
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
[Rails] Implementation of image slide show using Bootstrap 3
Rails implementation of ajax removal
Implementation of sequential search function
Implementation of like function (Ajax)
Implementation of category pull-down function
Login function implementation with rails
[Rails] Implement image posting function
[Rails 6] Pagination function implementation (kaminari)
Ruby on Rails <2021> Implementation of simple login function (form_with)
[Rails] Implementation of drag and drop function (with effect)
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
[Rails] Implementation of user logic deletion
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
Kaminari --Added pagination function of Rails
Rails sorting function implementation (displayed in order of number of like)
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implementation of many-to-many category functions
[Rails] gem ancestry category function implementation
[Ruby on Rails] Comment function implementation
[Rails 6] Like function (synchronous → asynchronous) implementation
[Rails] Comment function implementation procedure memo
Implementation of like function in Java
[Rails] Implementation of new registration function in wizard format using devise
I tried to implement the image preview function with Rails / jQuery
[Rails 6] Implementation of new registration function by SNS authentication (Facebook, Google)
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
Replace preview by uploading by clicking the image in file_field of Rails
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
[Rails] Addition of Ruby On Rails comment function