有没有人有关于使用嵌套属性让 jQuery File Upload 插件与 Rails 一起工作的建议/示例？
我的模型“has_many”附件并接受必要的嵌套属性。我想使用 jQuery File Upload 来实现这一点，但找不到任何好的示例来帮助我入门。
有没有人实现了这样的目标并能够给出一些方向？
谢谢。
【问题讨论】：
标签： ruby-on-rails ruby-on-rails-3 jquery file-upload
我已成功将其设置为在编辑带有嵌套附件的模型时工作。
在创建新模型时这是不可能的 - 至少目前不是因为回形针。
你必须设置一些我发现here的jQuery文件上传选项。
您应该在整个表单上调用fileUploadUI()，并将文件输入包装元素设置为dropZone。您还应该相应地设置url、fieldName 和formData。
这是我的 JS 的样子（简化）：
var $file_upload_form = $("form")
var attachable_id = $file_upload_form.attr("id").match(/_(\d*)$/)[1]
var attachable_type = $file_upload_form.attr("id").match(/edit_(\w*)_\d*$/)[1]
$($file_upload_form).fileUploadUI({
url : '/admin/attachments',
fieldName : "attachment[data]",
formData : [
{
name : 'attachment[attachable_id]',
value : attachable_id
},
{
name : 'attachment[attachable_type]',
value : attachable_type
}
],
dropZone : $('#attachments_dropzone'),
uploadTable : $('#upload_files'),
downloadTable : $('#download_files'),
buildUploadRow : function (files, index) {
var file = files[index];
return $('<tr><td>' + file.name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<td class="file_upload_cancel">' +
'<button class="ui-state-default ui-corner-all" title="Cancel">' +
'<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
'<\/button><\/td><\/tr>');
},
buildDownloadRow: function (file) {
return $('<tr><td><img alt="Photo" width="40" height="40" src="' + file.pic_path + '">' + file.name + '<\/td><\/tr>');
}
})
【讨论】：
看看这个视频的 7 分钟标记。 http://ror-e.com/info/videos/3
它描述了一种上传图片“product has_many images”的方法，您应该查看 ror_ecommerce 源代码，并在 admin/merchandise/images/products 中查看代码。
https://github.com/drhenner/ror_ecommerce
JS 在 application.js 和 application_helper.rb 中
【讨论】：
我花了很长时间才让它在我的一个项目中工作。这是我在另一个问题上发表的巨型 SO 帖子的链接。它可能会帮助你。
【讨论】：
我已经解决了这个问题并创建了demo app 来展示如何做到这一点。
简而言之，我有两个模型：item 和 upload。
item.rb:
has_many :uploads
accepts_nested_attributes_for :uploads, :allow_destroy => true
上传.rb：
belongs_to :item
has_attached_file :upload, :styles => { :large => "800x800", :medium => "400x400>", :small => "200x200>" }
我将uploads_attributes 添加到项目控制器。
现在您可以将 jquery-file-upload 表单添加到您的视图中，但是有一个问题：它以单独的请求发送每张照片。所以有我的 jquery-file-upload 初始化程序，它在一个请求中上传所有照片（创建项目模型），然后重定向到您的应用程序的根目录（您需要使用项目表单）：
<script type="text/javascript" charset="utf-8">
var num_added = 0;
var added = 0;
var all_data = {};
$(function () {
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
complete: function (e, data) {
window.location = "<%= root_url %>";
},
singleFileUploads: false
}) .bind('fileuploadadd', function (e, data) {num_added++;})
.bind('fileuploadsubmit', function (e, data) {
if(added < num_added)
{
if (added == 0)
all_data = data;
else
{
$.each(data['files'], function(i, file){
all_data['files'].push(file);
});
$.each(data['context'], function(i, context){
all_data['context'].push(context);
});
}
added++;
if (added == num_added)
{
added++;
all_data.submit();
}
return false;
}
})
.bind('fileuploadsend', function (e, data) {num_added = 0; added = 0;});
//
// Load existing files:
$.getJSON($('#fileupload').prop('action'), function (files) {
var fu = $('#fileupload').data('blueimpFileupload'),
template;
fu._adjustMaxNumberOfFiles(-files.length);
console.log(files);
template = fu._renderDownload(files)
.appendTo($('#fileupload .files'));
// Force reflow:
fu._reflow = fu._transition && template.length &&
template[0].offsetWidth;
template.addClass('in');
$('#loading').remove();
});
});
</script>
【讨论】：