我是 Rails 新手。
我正在尝试将 BlueImp 的 jQuery-File-Upload 插件实现到 Rails 4 应用程序中。所以我有基本的文件上传工作，但我遇到了多个问题。首先，上传页面的用户界面很奇怪。
我只看到“开始上传”和“取消上传”按钮。即使那样，我也无法单击它们，因为不可见的“添加文件”按钮占据了页面的一半，所以我只能通过以下方式上传文件：单击巨大的、不可见的“添加文件”按钮，选择一个文件，按两次 Tab突出显示“开始上传”按钮，然后按 Enter。上传后，我没有转到任何特定页面，而是转到显示文件上传参数的页面。但是，文件确实上传。我会上传图片，但我显然不能。任何帮助将不胜感激。
这是 video_resources 视图的 _form.html.haml 文件。我认为也许从 html 到 haml 的转换可能是一个问题。
= form_for VideoResource.new, :html => {:multipart => true, :id => "fileupdload" } do |f|
.row.fileupload-buttonbar
.span7
%span.btn.btn-success.fileinput-button
%i.icon-plus.icon-white
%span Add files...
= f.file_field :file_path
%button.btn.btn-primary.start{:type => "submit"}
%i.icon-upload.icon-white
%span Start upload
%button.btn.btn-warning.cancel{:type => "reset"}
%i.icon-ban-circle.icon-white
%span Cancel upload
%button.btn.btn-danger.delete{:type => "button"}
%i.icon-trash.icon-white
%span Delete
%input.toggle{:type => "checkbox"}/
.span5
.progress.progress-success.progress-striped.active.fade
.bar{:style => "width:0%;"}
.fileupload-loading
%br/
%table.table.table-striped
%tbody.files{"data-target" => "#modal-gallery", "data-toggle" => "modal-gallery"}
:javascript
var fileUploadErrors = {
maxFileSize: 'File is too big',
minFileSize: 'File is too small',
acceptFileTypes: 'Filetype not allowed',
maxNumberOfFiles: 'Max number of files exceeded',
uploadedBytes: 'Uploaded bytes exceed file size',
emptyResult: 'Empty file upload result'
};
/ The template to display files available for upload
%script#template-upload{:type => "text/x-tmpl"}
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>{%=locale.fileupload.start%}</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>{%=locale.fileupload.cancel%}</span>
</button>
{% } %}</td>
</tr>
{% } %}
/ The template to display files available for download
%script#template-download{:type => "text/x-tmpl"}
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
{% } %}</td>
<td class="name">
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
/ The jQuery UI widget factory, can be omitted if jQuery UI is already included
= javascript_include_tag 'jquery.ui.widget.js'
/ The Templates and Load Image plugins are included for the FileUpload user interface
%script{:src => "http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"}
%script{:src => "http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"}
/ The Iframe Transport is required for browsers without support for XHR file uploads
= javascript_include_tag 'jquery.iframe-transport.js'
= javascript_include_tag 'jquery.fileupload.js'
= javascript_include_tag 'jquery.fileupload-ui.js'
/ add include_tag js files to config.assets.precompile in ...environments/production.rb if you have it in vendor/ assets
%script{:charset => "utf-8", :type => "text/javascript"}
$(function () {
\// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload();
\//
\// Load existing files:
$.getJSON($('#fileupload').prop('action'), function (files) {
var fu = $('#fileupload').data('blueimp-fileupload'),
template;
fu._adjustMaxNumberOfFiles(-files.length);
template = fu._renderDownload(files)
\.appendTo($('#fileupload .files'));
\// Force reflow:
fu._reflow = fu._transition && template.length &&
template[0].offsetWidth;
template.addClass('in');
$('#loading').remove();
});
});