在 php 中无法使用带进度条的 XMLHTTPRequest 提交数据

Question

我想用ajax XMLHTTPRequest 提交数据，必须有进度条才能显示文件上传状态。我已经达到了进度条为运行但文件未上传的某种程度这是我的代码。请帮助解决我的问题。

var fd = new FormData(document.getElementById('posting_comment_'+a)[0]);
        alert(fd);
        fd.append("file_m_id",a);
        var bar = $('.bar');
        var xhr = new XMLHttpRequest();        
        xhr.upload.addEventListener("progress", uploadProgress, false);


        xhr.open("POST", "<?php echo base_url();?>dashboard/do_upload_video",true);
        xhr.send(fd);  




        function uploadProgress(evt) {
            if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            document.getElementById('progressNumber_'+a).innerHTML = percentComplete.toString() + '%';
            $("#status_"+a).animate( { width: percentComplete.toString()+"%"}, 5);
            }
}

Answer 1

试试这个

var fd = new FormData(document.getElementById('posting_comment_'+a)[0]);
alert(fd);
fd.append("file_m_id",a);
var xmlhttp = new XMLHttpRequest();
xmlhttp.upload.addEventListener("progress", function(event){ 
    var percent; 
    if(event.lengthComputable===true){ 
          percent = Math.round((event.loaded / event.total) * 100);
          uploadProgress(percent); 
    } 
});

xmlhttp.open("post", "<?php echo base_url();?>dashboard/do_upload_video");
xmlhttp.send(fd);

function uploadProgress(percent) {
    document.getElementById('progressNumber_'+a).innerHTML = percent?percent+'%':0;
    $("#status_"+a).animate( { width: percent?percent+'%':0}, 5);
}

Check my blog here to upload files using ajax with progress bar

在 php 中无法使用带进度条的 XMLHTTPRequest 提交数据

Cannot submit data with XMLHTTPRequest with progress bar in php

javascript

php

ajax

jquery

xmlhttprequest