如何上传在PHP中显示进度条的视频文件

Question

我想使用PHP上传视频文件，并通过进度条显示上传的进度。但这比我想象的更难，我试图将我发现的各个部分放在一起但不幸的是，我没有找到一个完全具有所需PHP，Ajax和HTML代码的工作代码，所以我试过了将不同的部分放在一起。 @fahad

'''
<?php include('session.php'); ?>
<?php include 'public/menubar.php'; ?>

<script src="assets/js/ckeditor/ckeditor.js"></script>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.validate.min.js"></script>

<script type="text/javascript">

    (function($,W,D) {
        var JQUERY4U = {};
        JQUERY4U.UTIL = {
            setupFormValidation: function() {
                //form validation rules
                $("#form-validation").validate({
                    rules: {
                        cat_id              : "required",
                        video_title         : "required",
                        video_duration      : "required",
                        video_description   : "required",
                        youtube             : "required",
                        url_source          : "required",
                        video               : "required",
                        image               : "required",
                        video_thumbnail     : "required"                     
                    },

                     messages: { 
                        cat_id              : "Please fill out this field!",
                        video_title         : "Please fill out this field!",
                        video_duration      : "Please fill out this field!",
                        video_description   : "Please fill out this field!",
                        youtube             : "Please fill out this field!",
                        url_source          : "Please fill out this field!",
                        video               : "Please fill out this field!",
                        image               : "Please fill out this field!",
                        video_thumbnail     : "Please fill out this field!"

                    },
                    errorElement : 'div',
                    submitHandler: function(form) {
                        form.submit();
                    }

                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

    })(jQuery, window, document);

</script>

<?php include 'public/add-video-form.php'; ?>
<?php include('public/footer.php'); ?>

'''

Answer 1

上传表单是表单的名称..（“progressBar”）是你的进度条使用它，如果你有任何问题，请告诉我

function _(el) {
    return document.getElementById(el);
}

$('#uploadForm').submit((event) => {
    event.preventDefault()
    var form = document.getElementById("uploadForm"),
        formdata = new FormData(form);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "upload-media");
    ajax.send(formdata);

    function formatBytes(bytes, decimals) {
        if (bytes == 0) return '0 Bytes';
        var k = 1024,
            dm = decimals <= 0 ? 0 : decimals || 2,
            sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
            i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    function progressHandler(event) {
        _("loaded_n_total").innerHTML = `Uploaded ${formatBytes(event.loaded)} of ${formatBytes(event.total)}`;
        var percent = event.loaded / event.total * 100;
        _("progressBar").style.width = `${Math.round(percent)}%`;
        _("status").innerHTML = `${Math.round(percent)}% uploaded... please wait`;
        _('submit').setAttribute('disabled', 'disabled');

    }

    function completeHandler(event) {
        var res = JSON.parse(event.target.response);
        _("titleView").innerHTML = `${res.title}`;
        _('total').innerHTML = `${formatBytes(res.fileSize)}`;
        _("statuses").innerHTML = `video Uploaded successfully`;
        _("status").innerHTML = `video Uploaded successfully file name is ${res.video}`;
        _("imgplace").innerHTML = `<img src="thumbnail/${res.thumbnail}">`;
        _("progressBar").style.width = "0";
        _("uploadForm").reset();
        _("submit").removeAttribute('disabled', 'disabled');

    }

    function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
    }

    function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
    }
})

Answer 2

您可以使用Javascript监听ajax的progress事件

这是前一个问题之一：How to show progress bar while loading, using ajax