在 Rails 中使用 jQuery 文件上传答案

【问题标题】：Using jQuery File Upload with Rails在 Rails 中使用 jQuery 文件上传
【发布时间】：2014-02-04 01:29:10
【问题描述】：

我关注了 Railscasts 集 (http://railscasts.com/episodes/381-jquery-file-upload) 以在我的网站上进行文件上传。一切都按照教程的意图进行，但我想改变一件事，到目前为止还没有成功。

我希望在他们点击提交按钮之前不提交。现在，我相信使用以下 js，表单会在用户找到文件时提交。

#Snippet
data.submit()


#Whole JS File
jQuery ->
  $('#new_update').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_update').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

我更愿意删除它并改用按钮，因为我有一个文本区域，我希望用户在提交表单之前填写它。

如何在用户点击按钮之前暂停图片上传？？？

更新

完整的 JS 文件

jQuery ->
  $('#new_update').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_update').append(data.context)
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")

      $("#submt_button").on 'click', ->
        data.submit()

    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-4

【解决方案1】：

正如原始答案所述，您可以通过删除 data.submit() 来实现此目的，但是，您需要确保“提交”事件触发了 JQuery 文件上传：

jQuery file upload: Is it possible to trigger upload with a submit button?

#Whole JS File
jQuery ->
  $('#new_update').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_update').append(data.context)
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")

      $("#submit_button").on 'click', (formEvent) ->
        formEvent.preventDefault()
        data.submit()

    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

【讨论】：

感谢您的回复。那是提交表单，但文件不再随表单提交而附加。
可以发截图吗？这可能与缩进有关
我将向您展示我在原始问题的更新中拥有的 JS 文件。
@JustinLicata 我遇到了类似的问题。但我的问题是表单提交而不是 jquery 上传插件提交。添加preventDefault() 这样表单就不会提交。

【解决方案2】：

查看js，我注意到有一个data.submit()，删除它，它不应该提交表单

【讨论】：