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

Posted 2023-02-25

【中文标题】如何检查浏览器是不是支持 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 文件上传。

【参考方案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）。