jQuery FileUpload gem 未初始化
jQuery FileUpload gem not initializing
我想在我的 Rails 应用程序中使用很棒的 jQuery 文件上传来上传多张照片。
所以我跟着Railscasts about it:
- 添加jquery-fileupload-rails gem
- 在我的 application.js
中添加一个要求
- 为我的照片创建一个表格
- 在名为 "housings.coffee"
的文件中初始化 FileUpload
但我不明白为什么当我尝试使用拖放或单击 "Add files..." 上传多张图片时没有任何反应。
当我按下 "submit" 按钮时,每张图片都正常保存。
拜托,你能帮帮我吗?我真的卡住了。
非常感谢!
application.js
```
//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require housings
housings.coffee
$(document).ready( ->
jQuery ->
file = $('fileupload').fileupload
console.log(file)
)
housings/_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 > index
@picture = Picture.new(housing_id: @user.housings.first.id)
不知道这是否可以帮助任何人,但我最终实现了另一个 javascript 工具,Dropzone。
我认为它会更好,因为 FileUpload 现在看起来很旧,我很头疼地试图让它工作。
Dropzone 与 Rails 完美配合,看起来很漂亮。
作为参考,我遵循了this tutorial.
我想在我的 Rails 应用程序中使用很棒的 jQuery 文件上传来上传多张照片。
所以我跟着Railscasts about it:
- 添加jquery-fileupload-rails gem
- 在我的 application.js 中添加一个要求
- 为我的照片创建一个表格
- 在名为 "housings.coffee" 的文件中初始化 FileUpload
但我不明白为什么当我尝试使用拖放或单击 "Add files..." 上传多张图片时没有任何反应。
当我按下 "submit" 按钮时,每张图片都正常保存。
拜托,你能帮帮我吗?我真的卡住了。
非常感谢!
application.js ```
//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require housings
housings.coffee
$(document).ready( ->
jQuery ->
file = $('fileupload').fileupload
console.log(file)
)
housings/_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 > index
@picture = Picture.new(housing_id: @user.housings.first.id)
不知道这是否可以帮助任何人,但我最终实现了另一个 javascript 工具,Dropzone。
我认为它会更好,因为 FileUpload 现在看起来很旧,我很头疼地试图让它工作。
Dropzone 与 Rails 完美配合,看起来很漂亮。 作为参考,我遵循了this tutorial.