7

我正在嘗試在我的新導軌項目中使用https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5。我想創建一個名爲assignments的對象,並在其中附加多個文件。如何使用jQuery文件以嵌套形式上傳?

如何爲上傳的文件創建嵌套形式的作業表單?

+1

嵌套表單在HTML4和HTML5中是非法的,並且通常會導致問題... – 2012-01-04 00:52:50

+4

他並不是指字面意義上的嵌套表單,而是以軌道方式,當您使用多個模型時。 – Robin 2012-01-04 00:55:04

+0

你有沒有找到這個解決方案? – Wilhelm 2012-02-28 17:34:48

回答

2

這個插件改變input [type = file]的信息形式,當它在其他形式內時,它是無效的。我解決了這個問題:我更改爲<div id="form">的外部形式。我通過jQuery提交表單

$.post(url, $('#form *').serialize(), function(response){...}, 'json') 

當然,您必須在提交表單之前在服務器端以某種方式管理上傳。

2

我這樣做是爲了增加一個單獨的表格我的主要形式外僅用於上傳文件的方式:

= s3_uploader_form post: void_url, as: "photo_url", id: "photo_upload" do 
    = file_field_tag "file", multiple: true 

= form_for @model do |f| 
    ... 
    = f.fields_for :children do |child_fields| 
    = file_field_tag :"#{child_id}_file", multiple: true 

然後我勾了文件上傳插件的一部分,以兩種形式,像這樣:

$("#photo_upload").fileupload 
    add: (e, data) -> 
    data.submit() 

    done: (e, data) -> 
    file = data.files[0] 

// For each child 
$("##{child_id}_file").fileupload 
    dropzone: $("##{child_id}_dropzone") 
    add: (e, data) -> 
    # Upload the file using the external upload form with the proper form action and fields 
    $rootPhotoUploadForm.fileupload('add', { files: [file], child_id: child_id }) 

基本上,我使用jQuery-File-Upload's API從外部上傳表單上傳文件。

請注意,當在外部上傳表單上觸發「添加」時,我會包含child_id,以便我知道哪個子級已觸發文件上載。該值在每個回調中的data變量中可用。

我抽象了很多,因爲有很多特定於應用程序的代碼,希望你能從那裏弄清楚。