javascript - Ajax 文件上传， 'progress' 上传事件不会在 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 的一个已知问题，您可以查看 here . 任何人都可以重现错误 with this fiddle .

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

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

更新 Windows October 似乎修复了 Edge 上的这个错误(Windows 版本 1809)