Question

所以我有一个表单，其中包含多个必填输入字段和一个必填文件输入（用于缩略图）。我想做的是当用户按下“提交”按钮并等待图像上载时，显示一个加载动画。我无法使用onclick进行此操作，因为即使必填字段为空，加载动画也会显示。我试图用这段代码来做到这一点：

$(document).ready(function(){
    $('form').on("submit",function(){
        var loading = document.getElementById("loading");
        loading.className = "opened";
    });
});

但是此代码仅在提交表单时显示加载动画（因此图像已经完成上传，到那时我已经重定向了页面），而这不是我想要的。那我该怎么办呢？

Answer 1

您可以通过阻止提交方法来使用checkValidity方法

$(document).on("submit", false); //prevent submit
var submitBtn = $('.submitBtn'); //change with your selector

submitBtn.click(function(e) {
    var form = $('form');
    if (form.checkValidity()) {
        form.submit();
    }
});

Answer 2

您可能需要侦听'progress'事件，以了解发送了上载文件的哪些部分。您还可以侦听XHR请求的'success'事件，以了解文件何时终于被更新。

这里是一个例子：

<script type="text/javascript">
jQuery( document ).ready( function ()
{
    $( '#send' ).on( 'click', function ()
    {
        var file = $( '#sel-file' ).get( 0 ).files[0],
            formData = new FormData();

        formData.append( 'file', file );
        console.log( file );
        $.ajax( {
            url        : 'save-file.php',
            type       : 'POST',
            contentType: false,
            cache      : false,
            processData: false,
            data       : formData,
            xhr        : function ()
            {
                var jqXHR = null;
                if ( window.ActiveXObject )
                {
                    jqXHR = new window.ActiveXObject( "Microsoft.XMLHTTP" );
                }
                else
                {
                    jqXHR = new window.XMLHttpRequest();
                }
                //Upload progress
                jqXHR.upload.addEventListener( "progress", function ( evt )
                {
                    if ( evt.lengthComputable )
                    {
                        var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                        //Do something with upload progress
                        console.log( 'Uploaded percent', percentComplete );
                    }
                }, false );
                //Download progress
                jqXHR.addEventListener( "progress", function ( evt )
                {
                    if ( evt.lengthComputable )
                    {
                        var percentComplete = Math.round( (evt.loaded * 100) / evt.total );
                        //Do something with download progress
                        console.log( 'Downloaded percent', percentComplete );
                    }
                }, false );
                return jqXHR;
            },
            success    : function ( data )
            {
                //Do something success-ish
                console.log( 'Completed.' );
            }
        } );
    } );
} );
</script>

Answer 3

我使用了Sercan Özen的想法（form.checkValidity()），并得到了这段代码，我点击了onclick按钮：

function loading() {
    var loading = document.getElementById("loading");
    var form = document.getElementById("add_form");
    if (form.checkValidity()) {
        loading.className = "opened";
    }
}

在上传图片时在表单提交上调用js函数

3 个答案: