跨域上传进度条在Firefox中不起作用

Question

i have following code, which is a cross domain uploader (example.com) with progress bar.

    $.ajax({
                    url: 'http://x.x.x.x:8080/.../uploader.php',
                    type: 'post',               
                    crossDomain: true,
                    data: formData,         
                    xhr: function() {               
                        var myXhr = $.ajaxSettings.xhr();               
                        if(myXhr.upload){                       
                            myXhr.upload.addEventListener('progress',progress, false);                      
                        }
                        return myXhr;
                    },
                    contentType: false,
                    processData: false,                     
                    success: function(dataupl) {
                        var json = JSON.parse(dataupl);
                        $('#uploadername').html(json.success);              }
                });
function progress(e){
                if(e.lengthComputable){
                    var progressbox     = $('#progressbox');
                    var progressbar     = $('#progressbar');
                    var statustxt       = $('#statustxt');
                    var completed       = '0%';
                    progressbox.show(250);                      

                    var max = e.total;
                    var current = e.loaded;
                    var Percentage = Math.floor((current * 100)/max);

                    //Progress bar
                    progressbar.width(Percentage + '%') //update progressbar percent complete
                    statustxt.html(Percentage + '%'); //update status text
                    if(Percentage>55)
                        {
                            statustxt.css('color','#fff'); //change status text to white after 50%
                        }                   
                    //console.log(Percentage);
                    if(Percentage >= 100) {
                       progressbox.hide(250);

                    }
                }  
            }

and the php on the server (x.x.x.x):

<?php
header('Access-Control-Allow-Origin: http://example.com');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 6400');

$target_dir = 'uploads/';
//$target_file = $_FILES['file']['name'];

// Sanitize the filename
$target_file = basename(preg_replace('/[^a-zA-Z0-9\.\-\s+]/', '', html_entity_decode($_FILES['file']['name'], ENT_QUOTES, 'UTF-8')));

    if (move_uploaded_file($_FILES['file']['tmp_name'], $target_dir . $target_file)) {
        $md5 = md5(mt_rand());
        chmod($target_dir . $target_file, 0777); //change permission 
        rename($target_dir . $target_file, $target_dir . $target_file . '.' . $md5);

        $success = File <b>". $target_file . "</b> has been uploaded succesfully.";
        $name = basename($target_file);
        $dataupl = array(
            'success' => $success,
            'name' => $name,
            'md5'    => $md5,       
        );  
        print(json_encode($dataupl));
    } else {
        $success = "Error.";
        $dataupl = array(
            'success' => $success,
        );  
        print(json_encode($dataupl));
    }
?> 

The progress bar working successfully on Chrome, and IE11, but not working on Mozilla. If i comment out this code:

xhr: function() {               
                            var myXhr = $.ajaxSettings.xhr();               
                            if(myXhr.upload){                       
                                myXhr.upload.addEventListener('progress',progress, false);                      
                            }
                            return myXhr;
                        },

upload is working on every browser (without progress bar).

any idea why this code not working with Firefox? (Sorry for my english).

Answer 1

Define "function progress(e)" before ajax call, and works.