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

因此，我有一个表单，其中包含多个必填输入字段和一个缩略图所需的文件输入。我想做的是当用户按下submit按钮并等待上传图像时显示加载动画。我不能用onclick实现这一点，因为即使所需的字段为空，加载动画也会显示出来。我试着用这段代码：

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

但是这段代码只会在表单提交时显示加载动画，所以图像已经上传完毕，到那时我已经重定向了页面，这不是我想要的。

---

那么我该怎么做呢？

您可以通过阻止提交方法使用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();
    }
});

---

您可能需要监听“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>

我使用了的idea form.checkValidity，最后得到了以下代码，我在单击按钮时调用该代码：

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

---

你是如何上传图像的？您可以在图像上传过程中收听事件。