Ajax文件上传，“进展”上传事件不会在Edge浏览器中触发

Question

我正在开发一个文件上传控件，该控件通过ajax发布表单数据。

我在Chrome，Firefox，IE 11、10中具有此工作的跨浏览器。但是，在Microsoft Edge浏览器中，似乎未触发上载“进度”事件。

谁能指出原因并告诉我Edge是否可以解决？

请参见下面的JavaScript代码段和以下HTML。

JavaScript：

...
uploadFile: function () {

    var self = this;

    var fileName = $('#file-input').val();

    if (fileName) {

        $('#file-upload-submit').attr('disabled', 'disabled');

        // Browsers create a path with 'C:\fakepath in, which is not useful
        // and needs to be stripped out

        fileName = fileName.replace('C:\\fakepath\\', '');

        var s3Key = self.s3KeyPrefix + self.createUuid() + '/' + fileName;

        $('#s3-key').val(s3Key);

        var fileExtension = self.getFileExtension(fileName);

        var contentType;

        if (fileExtension) {

            // Find the content type by extension

            for (var i = 0; i < self.contentTypeMap.length; i++) {

                if (fileExtension === self.contentTypeMap[i][0]) {

                    contentType = self.contentTypeMap[i][1];
                }
            }
        }

        contentType = contentType || 'text/plain';

        $('#content-type').val(contentType);

        var form = $('#file-upload');

        var xhr = new XMLHttpRequest();

        var handleUploadCommon = function () {

            $('#file-upload-submit').removeAttr('disabled', 'disabled');

            self.clearForm();

            self.clearProgress();

            self.clearCancelBtn();
        }

        var handleUploadProgress = function (e)
        {
            if (e.lengthComputable) {

                self.displayProgress(e.loaded, e.total);
            }
        }

        var handleUploadComplete = function ()
        {
            var url = self.s3BrowserLinkPrefix + '/' + s3Key;

            // Trigger callback

            if (self.callbacks.onFileUploaded) {
                self.callbacks.onFileUploaded(s3Key, url);
            }

            self.uploadedFiles.push({

                url: url,
                rendered: false
            });

            self.displayUploadedFiles();

            handleUploadCommon();
        }

        var handleUploadError = function ()
        {
            handleUploadCommon();

            console.error('An error occurred during file upload');
        }

        var handleUploadAbort = function ()
        {
            handleUploadCommon();
        }

        xhr.upload.addEventListener('progress', handleUploadProgress, false);
        xhr.upload.addEventListener('load', handleUploadComplete, false);
        xhr.addEventListener('error', handleUploadError, false);
        xhr.addEventListener('abort', handleUploadAbort, false);
        xhr.open('POST', form.attr('action'), true);
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.send(new FormData(form[0]));

        if ($('#cancel-btn').length > 0) {

            $('#cancel-btn').css('display', 'inline');

            $('#cancel-btn').click(function () {

                // Cancel ajax upload and reset form

                xhr.abort();

                handleUploadAbort();
            });
        }
    }
},
displayProgress: function(loaded, total)
{
    // If elements exist, display text percentage and / or progress bar

    var pct = ((loaded / total) * 100) | 0; // | 0 coverts to int

    if ($('#progress-percent').length > 0)
    {
        $('#progress-percent').css('display', 'inline-block');

        $('#progress-percent-text').text(pct + '%');
    }

    if ($('#progress-bar').length > 0) {

        $('#progress-bar-inner').css('width', pct + '%');
    }
}
...

HTML：

<form id="file-upload" action="https://@(ViewBag.S3Bucket).s3.amazonaws.com/" method="post" enctype="multipart/form-data">

        <input type="hidden" id="s3-key" name="key" /><br />
        <input type="hidden" id="content-type" name="Content-Type" /><br />
        <input type="hidden" name="acl" value="@ViewBag.S3Acl" />
        <input type="hidden" name="AWSAccessKeyId" value="@ViewBag.AwsAccessKeyId" />
        <input type="hidden" name="Policy" value="@ViewBag.Policy" />
        <input type="hidden" name="Signature" value="@ViewBag.Signature" />

        <input id="file-input" type="file" name="file" /> <br />

        <div class="file-upload-submit-container">
            <input id="file-upload-submit" class="btn btn-primary" type="button" name="submit" value="Upload"/>
            <span id="progress-percent">
                <svg class="loader" width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#bababa" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#707070" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
                <span id="progress-percent-text">0%</span>
            </span>
            <span id="cancel">
                <a id="cancel-btn">Cancel</a>
            </span>
        </div>
    </form>

Answer 1

这是Edge 15的已知问题，您可以在此处进行检查。任何人都可以用这个小提琴来重现错误。

xhr.upload.onprogress = updateProgress;
// I only added this code because stack overflow forced me!

如您所见，它仅在达到100％时更新。

更新 Windows October似乎可以在Edge（Windows 1809版）上修复此错误。