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

Posted 2023-02-24

【中文标题】php脚本通过ajax运行时显示进度条

【英文标题】：Display progress bar while the php script is running through ajax

【发布时间】：2016-03-19 14:22:39

【问题描述】：

我有一个通过 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

   <?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";
        
     ?>

对于进度条，我在这里有代码at this jsfiddle

我希望在参数和图像通过表单上传到服务器时显示一个进度条。但是我无法将进度条与 ajax 合并，谁能告诉我如何合并这两个代码，以便我可以显示进度条并将图像上传到服务器文件夹

【问题讨论】：

这将帮助你更多phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload

另外***.com/questions/22502943/… 会帮助你。

【参考方案1】：

我会给你方法 What is the cleanest way to get the progress of JQuery ajax request?

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;

这可能是一个合适的解决方案。

【讨论】：

我试过你的代码，但没有显示 preogress 栏。

你必须按照这个来放置css。这是仅用于跟踪 ajax 进度的代码。

请检查我是否包含 css 以及它的实现。

我应用了 css 但仍然无法显示栏。我也更新了帖子，如果你能再看一遍将不胜感激

可能是其他问题。检查 console.log(percentComplete);你明白了吗？如果你得到这个，那么显示问题意味着 css。