Vollständiges Bild

ezgif.com-optimize.gif --Wählen Sie ein Bild. --Vorschau anzeigen, bevor Bilder in der DB registriert werden. ** Wenn Sie nur die Vorschaufunktion sehen möchten, lesen Sie bitte nur die Einstellung von JQuery unten **

Umgebung

ruby 2.5.7 rails 5.2.4.3 Es ist möglich, jQuery festzulegen.

Bildposting Juwel

Dieses Mal werden wir "Refile" verwenden. Refile ist eine Datei-Upload-Bibliothek für Anwendungen. ** Refile bietet die folgenden Funktionen. ** ** **

-Bilder können leicht aufgenommen werden. -Kann Thumbnails generieren. -Sie können das Ziel für das Hochladen von Dateien festlegen.

Darüber hinaus fügen wir dieses Mal einen Edelstein (MiniMagick) hinzu, der die Bildverarbeitung wie die Größenanpassung ausführt.

`Gemfile`


...
 
#Bildposting Juwel
gem "refile", require: "refile/rails", github: 'manfe/refile'
#Bildverarbeitung (Größenanpassung usw.) Juwel
gem "refile-mini_magick"

Wenn Sie einen Edelstein hinzufügen, führen Sie den Befehl bundle install aus.

Fügen wir eine Spalte für das Bild hinzu!

Fügen Sie eine Spalte hinzu, um das Bild zu speichern. Der Spaltenname wird mit einer ID wie "image_id" festgelegt. (Datentyp ist Zeichenfolge) Lassen Sie es uns mit dem folgenden Befehl in der Datenbank wiedergeben

`python`


$ rails db:migrate

Anhangsmethode hinzufügen

Um Refile verwenden zu können, müssen Sie Ihrem Modell eine Anhangsmethode hinzufügen. Die Anhangsmethode ist erforderlich, damit die Refile auf die angegebene Spalte zugreifen kann. Auf diese Weise können in der Datenbank vorhandene Bilder erfasst und hochgeladen werden. Der Spaltenname lautet image_id, aber _id wird hier nicht hinzugefügt.

`Schreiben wir in das Modell`


attachment :image

Zu starken Parametern hinzufügen

Bitte fügen Sie ein Bild hinzu. Unter> privat def beliebiger Name params.require (: Modellname) .permit (: Spaltenname)

end Dieses Mal wird ** Bild ** in den Spaltennamen eingegeben

Dateieinstellungen anzeigen

`ruby:new.html.rb`


 <%= form_for(Modell-,url:Enthält URL oder Pfad) do |f| %>

      <div class="item-image">
        <%= attachment_image_tag from_Enthält das Modell für, :image, class: "img-square", fallback: "no_image.jpg ", size:"300x300" %>
      </div>

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

Richten Sie JQuery ein

・ Dieses Mal möchte ich

[JAVA] [JQuery] So zeigen Sie das ausgewählte Bild als sofortige Vorschau an + Fügen Sie ein Bildposting-Juwel hinzu