如何以嵌套形式使用 jQuery FIle Upload？

发布于 2024-12-23 20:02:21 字数 284 浏览 0 评论 0原文

我正在尝试使用 https://github.com /blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5 在我的新 Rails 项目中。我想创建名为 assignments 的对象，并附加多个文件。

如何为作业制作一个表单，该表单具有用于上传文件的嵌套表单？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

追风人 2024-12-30 20:02:21

该插件更改输入[type=file]信息表单，当它位于其他表单内时，它是无效的。我解决了这个问题：将外部表单更改为

。我通过 jQuery 提交表单

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

当然，在提交表单之前，您必须在服务器端以某种方式管理上传。

This plugin change input[type=file] info form and when it's inside other form it's invalid. I solved this: the outer form I changed to <div id="form">. I submit form via jQuery with

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

Of course you have to manage uploads somehow on server-side before submitting form.

回复收藏 0 原文

傾旎 2024-12-30 20:02:21

我这样做的方法是在主表单之外添加一个单独的表单，仅用于上传文件：

= 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 的 API 从外部上传表单上传文件。

请注意，我在触发外部上传表单上的“添加”时包含 child_id ，以便我知道哪个孩子触发了文件上传。该值在每个回调的 data 变量中可用。

我抽象了很多，因为有很多应用程序特定的代码，希望你能从中弄清楚。

The way I did this is to add a separate form outside of my main form just for uploading files:

= 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

Then I hook part of the fileupload plugin to both forms, like so:

$("#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 })

Basically, I use jQuery-File-Upload's API to upload the file from an external upload form.

Note that I include the child_id when triggering the 'add' on the external upload form so that I know which child has triggered a file upload. That value is available in the data variable in each callback.

I have abstracted a lot as there's a lot of application specific code, hopefully you can figure it out from there.

回复收藏 0 原文

~没有更多了~