代码之家 › 专栏 › 技术社区 › Tamas Koos

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

forms jquery javascript

Tamas Koos · 技术社区 · 6 年前

所以我有一个表单,包含多个必需的输入字段和一个必需的文件输入(用于缩略图)。我想做的是显示一个加载动画,当用户按下提交按钮,等待图像上传。我不能用onclick完成这项工作,因为加载动画将显示,即使所需字段为空。我试着用这段代码:

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

但这段代码只会在表单提交时显示加载动画(因此图像已经完成上载,然后我已经重定向页面),这不是我想要的。那我该怎么做呢?

3 回复 | 直到 6 年前

Sercan özen 6 年前

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

Evgeni Atanasov 6 年前

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

Tamas Koos 6 年前

我用过 Sercan Ãzen 的想法( form.checkValidity() )最后得到了这个代码,我调用button onclick:

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