javascript - 如何显示上传进度 jQuery、Ajax、PHP

Question

我有一个带有 AJAX 和 jQuery 的简单 PHP 上传表单。我想显示上传进度。

var main = function(e) {
    $("#upload").on('submit', function(e) {
        e.preventDefault();
        $("#l").show();
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            processData: false,
            success: function(data) {
                $("#l").hide();
            },
        });
    }); 
};
$(document).ready(main);

<form id="upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
<div id="here"></div>
<div id="l" style="display:none;">Loading...</div>
<div id="p"></div>

如何显示上传进度？

Answer 1

$(form).ajaxSubmit() 中有一组选项用于跟踪 AJAX 调用的进度。

 $(document).ready(function() { 
        $('#upload').submit(function(e) {   
            if($('#userImage').val()) {
                e.preventDefault();
                $('#loader-icon').show();
                $(this).ajaxSubmit({ 
                    target:   '#targetLayer', 
                    beforeSubmit: function() {
                        $("#progress-bar").width('0%');
                    },
                    uploadProgress: function (event, position, total, percentComplete){ 
                        $("#progress-bar").width(percentComplete + '%');
                        $("#progress-bar").html('<div id="progress-bar-status">' + percentComplete +' %</div>')
                    },
                    success:function (){
                        $('#loader-icon').hide();
                    },
                    resetForm: true 
                }); 
                return false; 
            }
        });

});