Question

我正在尝试使用 Paperclip 和 jquery-fileupload-rails

在我的应用中上传视频

我跟着ulpoad file with paper clip and jquery上传了视频，但是在我选择视频时正在上传视频，而不是等待按下提交按钮，所以我跟着 1：jQuery file upload: Is it possible to trigger upload with a submit button?选择一个视频并将其上传到提交按钮，而不是选择文件。

但是我是否在表单或外部表单中放置提交按钮存在问题。

当我把提交按钮放在表单中时，它发送两个请求按下提交按钮，一个带有视频，第二个没有视频。

如果我将按钮放在窗体外面按下提交按钮发送一个请求，但在成功创建/更新后它仍保留在同一页面上。

我想要的只是按下提交，只发送一个请求并在成功创建/更新时重定向到索引页面。

在_form.slim

中

= simple_form_for [:admin,add] do |f|
   .wizard-content
     .row
       .col-sm-6
          = f.input :video, multiple: false, wrapper: :horizontal_file_input
          button#submit_button.btn.btn-primary
            | Save

在adds.coffee中

 jQuery ->
      $('#add_video').attr('name','add[video]')
      $('#add_video').fileupload
         $('#submit_button').off('click').on 'click', ->
           data.submit()

在控制器中我有

def create
     if add.save
       redirect_to admin_adds_path
       flash[:success]= "Add Created"
     else
       render :new
     end
   end

   def update
     if add.update(add_params)
       redirect_to admin_adds_path
       flash[:success]= "Add Updated"
     else
       render :edit
     end
   end

还有一个_add.slim

= image_tag(@add.uploaded_file(:small), class: 'thumb')

我还创建了create.js.erb和edit.js.erb作为我遵循的建议教程（但是，我不明白它的使用）

- if @add.new_record?
  |  alert('Failed');
- else
  |  if ($('h1') !== undefined) { $('h1').append("
  =j render partial: 'adds/add', locals: { add: @add }
  | "); }

这有什么不对吗？

Answer 1

尝试使用表单内的按钮并使用event.preventDefault（），因为表单似乎正在执行默认操作，即发送数据并重新加载页面并调用js。

$('#submit_button').off('click').on 'click', (event) ->
  event.preventDefault()
  data.submit()

Answer 2

当您将按钮放在表单外时，您可以处理done事件和重定向。请记住，此POST是ajax，如果您发布更改或新元素，则通过ajax no通过Web浏览器页面进行响应。

有些喜欢

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
        done: function (e, data) {
           window.location.href = "data.next_url"; 
        }
    },
});

也许你需要回复一些json（而不是重定向redirect_to admin_adds_path）从控制器传递到javascript信息（有些像success，error，next_url，{{ 1}}）

JQuery文件上传：在data.submit（）上发送两个请求

2 个答案: