Ajax 文件上传 - 在 IE 中不起作用

Question

我的网站上有一个 ajax 图片上传，但在 IE 中无法使用。我注意到的第一个问题是 IE 中未定义“FormData”类型。我遇到了我在下面的 ajax 调用中使用的解决方法。但是，ajax 调用仅在单击上传时返回错误函数，从不点击我的控制器操作“UpdateAvatar”。在所有其他浏览器中都能完美运行。有人有这方面的经验吗？

<div class="modal-body">
    <input type="file" name="UploadFile" id="uploadfile">
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
    <button type="button" id="updateAvatarBtn" class="btn-success btn">Upload</button>
</div>

$('#updateAvatarBtn').click(function (event) {
    var file = $('#uploadfile').get(0).files;

    if (typeof FormData == "undefined") {
        var data = [];
        data.push('data', JSON.stringify(file));
    }
    else {
        var data = new FormData();
        data.append("file", file[0]);
    }
    $.ajax({
        url: 'AccountSetup/updateAvatar',
        type: 'POST',
        contentType: false,
        processData: false,
        data: data,
        success: function (response) {
            $('#imgPreview').attr("src", response);
            $('#uploadImageModal').modal('hide');
            toastr.success('Image Upload Successful');
        },
        error: function () {
            toastr.error('Image Upload Unsuccessful. Please try again.');
        }
    })
})    

Answer 1

我注意到的第一个问题是 IE 中未定义“FormData”类型。

这是主要问题。您无法在IE <= 9 中使用 AJAX 上传文件。对于那些旧版本的 IE，您将需要使用更古老的技术，例如使用 jquery.form 插件。此插件检测浏览器类型和版本，如果它发现旧版浏览器，它将回退到隐藏的 iframe 或 flash，因为这是您可以在这些旧版浏览器中模拟 AJAX 文件上传的唯一方法。

这是我个人所说的，我不会打扰那些过时的浏览器。我宁愿执行功能检测，如果浏览器不支持本机 HTML5 FormData，我会简单地通知用户，由于他使用这种旧版浏览器，他的体验会下降，并且只需使用完整回发到服务器。