Caricamento AJAX utilizzando il plug-in Prototype.js

Question

Come caricare un file di immagine usando ajax usando il plug-in prototype.js, devo visualizzare quell'immagine dopo che è stata caricata, per favore aiutatemi a risolvere questo problema.

Grazie

Answer 1

Avrai bisogno anche di qualcosa sul server.

Consiglio di usare graffetta per archiviare i file sul tuo server.

Dopo averlo configurato, dovresti fare in modo che il tuo ajax generi un modulo con un "file" " campo. Inoltre, ricorda che il modulo deve essere multipart.

<% form_for @picture, :html => { :multipart => true } do |f| %>
  <%= f.file_field :file %>
  <%= f.submit "Submit" %>
<% end %>

Se devi solo caricare un file, probabilmente non hai bisogno di AJAX completo - solo javascript semplice - per mostrare / nascondere il modulo. In questo modo:

<%= link_to_function 'Show/Hide image upload') do |page|
      page.visual_effect :toggle_blind, 'upload_image'
    end
%>

<div id='upload_image' style='display:none'>
  <% form_for @picture, :html => { :multipart => true } do |f| %>
    <%= f.file_field :file %>
    <%= f.submit "Submit" %>
  <% end %>
</div>

Nota che per nascondere / mostrare il div sto usando un effetto Scriptaculous, non solo un prototipo - scriptaculous viene comunque incluso di default sui binari.

Answer 2

è possibile utilizzare remote_form_for con un plug-in di caricamento file come attachment_fu o graffetta e quindi visualizzare nuovamente l'immagine nella vista una volta caricata. Potrebbe utilizzare update_page nel controller.

Answer 3

https://github.com/JangoSteve/remotipart

Remotipart è un gioiello di Ruby on Rails che consente il caricamento di file AJAX con jQuery in moduli remoti Rails 3.0 e Rails 3.1. Questa gemma migliora la funzionalità del modulo remoto jQuery di Rails nativo consentendo il caricamento di file asincroni con modifiche minime o nulle alla tua applicazione.

gem 'remotipart', '~> 1.0'
bundle install