在php脚本通过ajax运行时显示进度条

问题描述

我有一个通过ajax向服务器提交值的表单.

I have a form that submit value to the server though ajax.

<form>
<input id="titlee" name="titlee">
<input type="file" name="fileToUpload" id="fileToUpload">
<button  type="submit" value="submit" id="submit" name="submit">Start</button>
<div class="progress"></div>
</form>

脚本

<script type="text/javascript">
$(function()
    {
        $("#submit").click(function()
            {
                var titlee = $("#titlee").val();
                var fileToUpload= $("#fileToUpload").val();

                var dataString = 'titlee='+ titlee + '&fileToUpload=' + fileToUpload;

                $.ajax(
                    {
                        type: "POST",
                        url: "c_insert_test.php",
                        data: dataString,
                        success: function()
                    });

                return false;
            });
    });
</script>

c_insert_test.php

c_insert_test.php

   <?php
    $titlee = $_POST['titlee'];
    $target_dir = "reqdoc/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

    $new_filename = $target_dir . uniqid() . '.' . $imageFileType;
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $new_filename))
        {
            $filee = $new_filename;
            // insert query to insert the image path and other parameters in the table
        }
    else
        {
            echo "false";
        }
     ?>

对于进度条，我在此jsfiddle中的代码

For the progress bar I have code here at this jsfiddle

我希望在通过表格将参数和图像上传到服务器时显示进度条.但是我无法将进度条与Ajax合并，任何人都可以告诉我如何合并这2个代码，以便我可以显示进度条并将图像上传到服务器文件夹

I wish to display a progress bar while the paramters and the image gets uploaded to the server through the form. However I am not able to merge the progress bar with the ajax, can anyone please tell how i can merge these 2 code so that i can display the progress bar and upload the image to the server folder

推荐答案

我会按照什么是最干净的方法获得JQuery ajax请求的进度?

JQuery

$(function()
{
    $("#submit").click(function()
    {
        var titlee = $("#titlee").val();
        var wtag = $("#wtag").val();

        var dataString = 'titlee='+ titlee + '&wtag=' + wtag ;

        $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            console.log(percentComplete);
                            $('.progress').css({
                                width: percentComplete * 100 + '%'
                            });
                            if (percentComplete === 1) {
                                $('.progress').addClass('hide');
                            }
                        }
                    }
                }, false);

                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                    }
                }, false);

                return xhr;
            },
            type: 'POST',
            url: "c_insert_test.php",
            data: dataString,
            success: function (data) {
                //Do something on success
            }
        });

        return false;
    });
});

CSS

.progress {
    display: block;
    text-align: center;
    width: 0;
    height: 3px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

这可能是解决此问题的合适方法.

This can be a proper solution to do this.

这篇关于在php脚本通过ajax运行时显示进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！