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

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 提交();文档:http://api.jquery.com/submit/