Question

有没有人有关于使用嵌套属性获取使用Rails的jQuery文件上传插件的建议/示例？

我的模型“has_many”附件并接受必要的嵌套属性。我想使用jQuery文件上传，但是找不到任何好的例子让我开始。

有没有人取得这样的成绩并能够给出一些指导？

感谢。

Answer 1

在使用嵌套附件编辑模型时，我已经成功地将其设置为工作在创建新模型时也是如此 - 至少目前不是由回形针引起的。

您必须设置一些jQuery文件上传选项，我找到了here。

您应该在整个表单上调用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>');
    }
})

Answer 2

看一下这段视频的7分钟标记。 http://ror-e.com/info/videos/3

它描述了一种上传图片的方法“产品has_many图片”您应该查看ror_ecommerce源以及您可以查看代码的admin / merchandise / images / products。

https://github.com/drhenner/ror_ecommerce

JS位于application.js和application_helper.rb

中

Answer 3

我花了很长时间让它在我的一个项目中工作。这是我在另一个问题上发表的巨型SO帖子的链接。它可能对你有帮助。

Rails 3 + JQuery-File-Upload + Nested Model

Answer 4

我已经解决了这个问题并制作了一个demo app来展示如何做到这一点。

简而言之，我有两个模型：项目和上传。

item.rb的：

has_many :uploads
accepts_nested_attributes_for :uploads, :allow_destroy => true

upload.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>

Rails 3和嵌套的jQuery文件上载模型

4 个答案: