JQuery文件上传：在data.submit（）上发送两个请求 [英] JQuery File Upload: sending two request on data.submit()

问题描述

我正在尝试使用 Paperclip 和 jquery-fileupload-rails 上传我的应用中的视频

I am trying to Upload videos in my app using Paperclip and jquery-fileupload-rails

我跟着 ulpoad文件用纸夹和jquery 上传视频，但是在我选择视频时上传视频并且不等待按下提交按钮，所以我跟着
1 ： jQuery文件上传：是是否可以通过提交按钮触发上传？选择单个视频并将其上传到提交按钮，而不是选择文件。

I followed ulpoad file with paper clip and jquery to upload video, but was uploading video just as I select the video and don't wait for pressing submit button, So I followed 1: jQuery file upload: Is it possible to trigger upload with a submit button? to select a single video and upload it on submit button, not on selecting file.

但是有问题我是否提交但是表格或表格中的吨。

But There is issue on whether I put submit button in the form or outside form.

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

When I put the submit button in the form than it sends two requests to pressing submit button, one with Video and second one without Video.

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

And If I put button outside form that it sends one request on pressing submit button but after successful create/update it remains on the same page.

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

All I wanted is that on pressing Submit, sending just one request and redirect to index page on successful create/update.

在_form.slim

In _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中

In 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

there is also a _add.slim

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

我还创建了create.js.erb和edit.js .erb我按照建议的教程（虽然，我不明白它的使用）

I also created create.js.erb and edit.js.erb as suggested tutorial I followed (though, I didn't understand its use )

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

这有什么不对吗？

推荐答案

当您将按钮放在窗体外时，您可以处理已完成事件和重定向。
请记住这个POST是ajax，如果你POST一个更改或新元素你通过ajax no通过网页浏览器页面得到回复。

When you put button outside form you can handle the done event and the redirect. Remember this POST is ajax and if you POST a change or new element you have a response via ajax no via web browser page.

有些喜欢

$('#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 ，错误， next_url ，其他）

Maybe you need to response some json (instead of redirection redirect_to admin_adds_path) to pass from controller to javascript information (some like success,error,next_url,others)

这篇关于JQuery文件上传：在data.submit（）上发送两个请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！