Question

我有一个表单来执行上传：

<%= form_tag({:controller => "assets", :action => "create", :id => @question.id}, :multipart => true) do %>  
    <%= label_tag("file", "Attachment:") %><%= file_field_tag "uploadfile" %><br />
    <%= label_tag("description", "Description") %><br />
    <%= text_area_tag("description",{}, :size => "70x6") %>
    <%= submit_tag("Upload", :class => "register_submit_buttons") %> 
<% end %>

表单提交完美，文件开始上传到amazon s3。我想要做的是触发一个jquery ui对话框，在上传开始时打开（我点击表单上提交的那一刻），然后在上传完成后关闭它。我已经知道如何在这样的链接触发时打开一个对话框：

链接到我的对话框div：

<%= link_to("Open dialog", {}, :class => "open-dialog") %>

对话框div：

<div class="dialog" title="Title">
    ...contents of div
</div>

最后在我的application.js

中

$(function() {
    $( '.dialog' ).dialog({
        autoOpen: false,
        width: 530,
        modal: true,
        //closeOnEscape: false,
    });
    $('.open-dialog').click(function(){
        $('.dialog').dialog('open');
        return false;
    });
});

正如你所看到的，大多数东西都是jquery ui网站的标准。我还想在对话框中添加一个按钮来取消上传。我怎样才能做到这一点？

提前感谢您的帮助

Answer 1

您可以使用表单的jQuery submit（）侦听器 - 这将在提交表单时触发（并且可能是在上载开始时）。

例如：

$('form').submit(function(){
    //show box in here
    alert('lorem ipsum dolor sit amet');
});

编辑：

不确定如何取消上传，抱歉。但是你可以从这里获得一些启示：http://aquantum-demo.appspot.com/file-upload

jQuery submit（）; docs：http://api.jquery.com/submit/

Answer 2

你可以这样做：

$('input[type=submit]').click(function(){
     $('.dialog' ).dialag('open');
});

这将打开对话框并提交表单。当然，如果FORM不是AJAX，您的dialaog将在文件上传后立即关闭，因为您被重定向到另一个页面。

如何在上传开始时触发jquery ui对话框打开

2 个答案: