如何检查浏览器是否支持 HTML5 文件上传（FormData 对象）？答案

【问题标题】：How can I check if the browser support HTML5 file upload (FormData object)?如何检查浏览器是否支持 HTML5 文件上传（FormData 对象）？
【发布时间】：2011-11-09 22:03:00
【问题描述】：

如何查看浏览器是否支持 HTML5 文件上传（FormData 对象）？

var fd = new FormData();

遵循此post 的答案，但代码未返回有关浏览器的正确答案，

window.onload = function()
{
 if (!!window.FileReader)
 {
  alert('supported');
 }
 else
 {
  alert('not supported');
 }
}


Firefox - supported
Chrome - supported
Opera - supported
Safari - not supported
IE9 - not supported

但正确的浏览器支持应该是，

Firefox - supported
Chrome - supported
Opera - not supported
Safari - supported
IE9 - not supported

我已经在 Opera 上测试了 html 5 文件上传，它确实不工作。

我确信 safari 支持 html 5 文件上传。

【问题讨论】：

标签： javascript file-upload safari html5-video opera

【解决方案1】：

  function supportFormData() {
     return !! window.FormData;
  }

来源：https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/

【讨论】：

【解决方案2】：

在 Safari 5.1.7 、Firefox

Safari 将返回文件大小 0

Opera 不支持表单数据的 append 方法

firefox

【讨论】：

【解决方案3】：

这是我用来检查浏览器是否支持 FormData 和上传进度的单行器，在 jQuery 中：

 var xhr2 = !! ( window.FormData && ("upload" in ($.ajaxSettings.xhr()) );

【讨论】：

【解决方案4】：

您可以使用此库提供的解决方法。 https://github.com/francois2metz/html5-formdata

【讨论】：

【解决方案5】：

试试if( window.FormData === undefined ) 或if( window.FormData !== undefined )。

【讨论】：

+1，在 IE8/IE9 ( window.FormData === undefined ) 中返回 true，在 IE10 中返回 false。
应该使用typeof，因为undefined在某些浏览器中不是关键字。（例如我可以说var undefined = window.FormData）
@DCShannon 不需要括号：if(typeof window.FormData === 'undefined')
@Koen 仅仅因为它们是可选的并不意味着它们被禁止。我更喜欢使用括号。
我没有说它们是被禁止的。但是你写+，-和其他“一元运算符”也带括号吗？ developer.mozilla.org/en-US/docs/Web/JavaScript/…

【解决方案6】：

您需要检查浏览器是否支持 HTML5 文件 API。我通过检查是否设置了 FileReader 函数来做到这一点，如果没有设置，则意味着浏览器将不支持文件 API。

// Check if window.fileReader exists to make sure the browser supports file uploads
if (typeof(window.FileReader) == 'undefined') 
    {
        alert'Browser does not support HTML5 file uploads!');
    }

【讨论】：

此代码检查 FileReader 对象，该对象与 FormData 对象不同。

【解决方案7】：

从 http://blog.new-bamboo.co.uk/2010/7/30/html5-powered-ajax-file-uploads

function supportAjaxUploadProgressEvents() {
    var xhr = new XMLHttpRequest();
    return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
};

作为 FormData，send() 的能力和上传属性（及其 onprogress 事件）都是 XMLHttpRequest 级别 2 的一部分，您可以测试 .upload 以查看您是否有级别 2。我手边没有 Mac，但该函数（遗憾的是，但正确）对于 Opera 11.50 返回 false（对于 Firefox 4 返回 true）。

【讨论】：