进度条在 XMLHTTPRequest 中不起作用

Posted

技术标签:

【中文标题】进度条在 XMLHTTPRequest 中不起作用【英文标题】：Progress bar does not work in XMLHTTPRequest 【发布时间】：2016-04-29 20:28:18 【问题描述】：

我想在 php 中上传图片但同时显示进度状态，在下面使用 XMLHttpRequest 的代码中，图片正在正确上传，但我看不到进度条在移动。

这是我的代码。请帮助解决我的问题。

<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <style type="text/css">
   .progress 
    display: block;
    text-align: center;
    width: 0;
    height: 20px;
    background: red;
    transition: width .3s;

.progress.hide 
    opacity: 0;
    transition: opacity 1.3s;

   </style>
<script type="text/javascript">

$(document).ready(function()

$(document.body).on('click', '#button1' ,function(e)

var formData = new FormData($("#multiple_upload_form")[0]);
$.ajax(
    xhr: function () 
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) 
            if (evt.lengthComputable) 
                var percentComplete = evt.loaded / evt.total;
                alert("percentComplete"+percentComplete);
                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: "ajax_upload.php",
    mimeType:"multipart/form-data", 
    data: formData,
    async : false,
    cache : false,
    contentType : false,
    processData:false,
    success: function (data)   alert("data"+data);  
);

);
);
</script>

</head>
<body>
<form method="post" enctype="multipart/form-data" id="multiple_upload_form">
<div class="progress"></div>
<input type="file" name="upload_f"/>
<input type="button" id="button1" name="button" value="submit"/>
</form>
</body>
</html>

ajax_upload.php 

 <?php
 $output_dir = "upload/";
      $type="video";

      $fileName = $_FILES["upload_f"]["name"];
      $extn = pathinfo($fileName, PATHINFO_EXTENSION);

      if(move_uploaded_file($_FILES["upload_f"]["tmp_name"],$output_dir.$fileName))
      
        echo "1";

      
      else
      
        echo "0";

         

 ?>

【问题讨论】：

alert("percentComplete"+percentComplete);的结果？ @AddWeb- 如果条件不进入控件，这就是为什么不显示警报的原因。请提供一些解决方案。 那你需要先检查：alert(evt.lengthComputable);在if语句之前。 @AddWeb- alert(xhr) 在 [object XMLHttpRequest] 之后打印 让我们continue this discussion in chat。 【参考方案1】：

你是上传文件异步的方式所以设置它为真。 这是您的解决方案代码：

JS 代码：

$(document).ready(function()

    $(document.body).on('click', '#button1' ,function(e)

        var formData = new FormData($("#multiple_upload_form")[0]);
        $.ajax(
            xhr: function () 
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) 
                    if (evt.lengthComputable) 
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css(
                            width: percentComplete * 100 + '%'
                        );
                        if (percentComplete === 1) 
                            $('.progress').addClass('hide');
                        
                    
                , true);
                xhr.addEventListener("progress", function (evt) 
                    if (evt.lengthComputable) 
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css(
                            width: percentComplete * 100 + '%'
                        );
                    
                , true);
                return xhr;
            ,
            type: 'POST',
            url: "ajax_upload.php",
            mimeType:"multipart/form-data", 
            data: formData,
            async : true,
            cache : false,
            contentType : false,
            processData:false,
            success: function (data)   alert("data"+data);  
        );

    );
);

希望对您有所帮助！

【讨论】：

以上是关于进度条在 XMLHTTPRequest 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

extjs 5 网格的滚动条在边框布局面板中不起作用

自定义 CSS webkit 滚动条在 Firefox 浏览器中不起作用

Cordova Async XMLHttpRequest().open 在 Android 中不起作用

像寻求拖动视频进度条这样的视频控件在 HTML 中不起作用？

进度可见性在列表视图页脚中不起作用

UIProgressView 跟踪和进度图像在 iOS7 中不起作用