0

我想使用我的Rails应用程序中出色的jQuery文件上传来上传多张图片。jQuery FileUpload gem未初始化

所以我也跟着Railscasts about it

  • 添加jquery-fileupload-rails gem
  • 添加在我的application.js一个需要
  • 创建形式为我的图片
  • 初始化文件上传在一个名为“外壳文件.coffee“

但我不明白为什么什么事都没有发生n我尝试上传多张照片,使用拖放或点击“添加文件...”。

当我按下“提交”按钮时,每张照片都会正常保存。

请问,你能帮助我吗?我很困难。

非常感谢!

的application.js ```

//= require jquery 
//= require jquery_ujs 
//= require jquery-fileupload/basic 
//= require housings 

housings.coffee

$(document).ready(-> 
    jQuery -> 
    file = $('fileupload').fileupload 
    console.log(file) 
) 

座/ _form.html.erb

<%= form_for [@user, @picture], html: { multipart: true, id: 'fileupload'} do |f| %> 
     <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> 
     <div class="row fileupload-buttonbar"> 
     <div class="span7"> 
      <!-- The fileinput-button span is used to style the file input field as button --> 
      <span class="btn btn-success fileinput-button"> 
      <i class="icon-plus icon-white"></i> 
      <span>Add files...</span> 
      <%= f.file_field :image, multiple: true, name: 'picture[image]' %> 
      </span> 
      <%= f.hidden_field :housing_id, value: @housing.id %> 
      <button type="submit" class="btn btn-primary start"> 
      <i class="icon-upload icon-white"></i> 
      <span>Start upload</span> 
      </button> 
      <button type="reset" class="btn btn-warning cancel"> 
      <i class="icon-ban-circle icon-white"></i> 
      <span>Cancel upload</span> 
      </button> 
      <!--<button type="button" class="btn btn-danger delete">--> 
      <!--<i class="icon-trash icon-white"></i>--> 
      <!--<span>Delete</span>--> 
      <!--</button>--> 
      <input type="checkbox" class="toggle"> 
     </div> 
     <div class="span5"> 
      <!-- The global progress bar --> 
      <div class="progress progress-success progress-striped active fade"> 
      <div class="bar" style="width:0%;"></div> 
      </div> 
     </div> 
     </div> 
     <!-- The loading indicator is shown during image processing --> 
     <div class="fileupload-loading"></div> 
     <br> 
     <!-- The table listing the files available for upload/download --> 
     <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody> 
     </table> 
    <% end %> 

housings_controller.rb>指数

@picture = Picture.new(housing_id: @user.housings.first.id) 

回答

0

不知道这是否可以帮助任何人,但我最终实现另一个JavaScript工具,Dropzone

我认为这会更好,因为FileUpload现在看起来很老了,而且我很头疼,试图使它工作。

Dropzone与Rails完美搭配,看起来非常漂亮。 作为参考,我遵循this tutorial