Question

我正在尝试在浏览器通过POST请求下载文件时显示文件链接旁边的下载gif。目前，单击文件链接不会执行任何操作。如果我将.submit(function(){...});更改为.submit();，则会下载该文件，但不会显示加载的gif。如果我将加载gif设置为.show();之前的.submit();，则在文件已经下载之后才会显示。

这是我目前的结构和JS ......

HTML

<a class="file" data-location="directory/file">File.xlsx</a>
<span class="download_loader"></span>

JS

$(document).on('click', 'a.file', function () {
    var location = $(this).data("location");
    var name = $(this).html();
    var loader = $(this).nextAll("span.download_loader");
    $('<form action="FileManager/download.php" method="POST" id="temp_download_form"><input type="hidden" name="name" value="'+name+'" /><input type="hidden" name="location" value="'+location+'" /></form>').appendTo('body').submit(function(loader) {
        loader.show();
        return true;
    });
    $("#temp_download_form").remove();
});

- 解决方案 -

根据下面的答案和评论，我终于得到了一些有用的东西。我使用了https://github.com/filamentgroup/jQuery-File-Download的下载功能以及一些超时功能来管理流程。最后的UX很好，允许下载gif显示和隐藏得很好。见这里：http://d.pr/i/KfRP

最终JS代码

// Download Function
function download(url, data, method){
    //url and data options required
    if( url && data ){ 
        //data can be string of parameters or array/object
        data = typeof data == 'string' ? data : $.param(data);
        //split params into form inputs
        var inputs = '';
        $.each(data.split('&'), function(){ 
            var pair = this.split('=');
            inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />'; 
        });
        //send request
        $('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
        .appendTo('body').submit().remove();
    };
};

// Download File
$(document).on('click', 'a.file', function () {
    var location = $(this).data("location");
    var name = $(this).html();
    var cell = $(this).closest('td');
    $('<span class="download_loader"></span>').appendTo(cell);

    setTimeout(function(){
        download('FileManager/download.php','name='+name+'&location='+location,'post');
    }, 1000);

    setTimeout(function(){
        $("span.download_loader").fadeOut();
    }, 2000);
});

Answer 1

我会做这样的事情：

var form = $("<form/>", {
    action : "FileManager/download.php",
    method : "POST",
    id : "temp_download_form"
});

//add inputs the same way and append to form... form.append(input1)... form.append(input2)

form.on('submit', function () {
    loader.show();
});

但是......问题是这是一个异步操作，所以在操作完成时不容易判断。

这是一篇关于检查表单何时完成的文章

How to do a Jquery Callback after form submit?

但是......我会使用$ .ajax提交表单并使用success方法触发删除加载图标。

以下是使用jQuery的$ ajax

的文档

https://api.jquery.com/jQuery.ajax/

submit（）函数干扰提交事件

1 个答案: