浏览器支持细则


文件上传


以下浏览器支持至少一种形式的 AJAX 样式文件上传,通过 XHR 或通过 Iframe 传输

桌面浏览器
  • Google Chrome
  • Apple Safari 4.0+
  • Mozilla Firefox 3.0+
  • Opera 11.0+
  • Microsoft Internet Explorer 6.0+
移动端浏览器
  • Apple Safari 于 iOS 6.0+ (iOS 8.0.2 修复 iOS 8 文件上传 bug)
  • Google Chrome 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+
  • Default Browser 于 Android 2.3+
  • Opera Mobile 12.0+

另请参阅 viljamis 的移动端上传支持

多文件选择


以下浏览器支持多文件选择:

桌面浏览器
  • Google Chrome
  • Apple Safari 5.0+
  • Mozilla Firefox 3.6+
  • Opera 11.0+
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 iOS 6.0+
已知 bugs
  • Windows 上的 Safari 存在一个 bug,就是在选择多个文件时会将文件大小视为 0 字节,不过选择单个文件时则没问题。
  • iOS 9 有一个已知 bug,即从照片库中选择的照片都被命名为 image.jpeg,这在一次上传多个文件时会出现问题。理想情况下,你的服务端程序应负责对上传的文件进行去重 (示例)。假如你无法控制服务端程序,例如直接上传到 Amazon S3 的情况,那么你可以将 uniqueFilenames: {} 添加到 options 对象,它能让插件在文件上传之前进行文件名去重。
关于 uniqueFilenames 的进一步说明:
默认情况下,文件名去重应在服务端进行处理。但如果你无法掌控服务端(例如,需要直接将文件上传到 Amazon S3 时),uniqueFilenames 配置项可以设为一个空对象或映射了现有文件名的对象,例如,{ "image.jpg": true, "image (1).jpg": true }。在设好了之后,所有文件都将使用唯一的文件名上传,如有必要,会给文件名添加数字后缀,例如:“image (2).jpg”。
文件夹选择

选择文件夹上传也是可以的,不过目前只有 Google Chrome 支持。

要启用此功能,需要将下面的 directory 属性及相关专有属性 webkitdirectory 添加到文件 input 字段:

<input type="file" name="files[]" multiple directory webkitdirectory>

拖放功能


以下浏览器支持拖放功能:

  • Google Chrome
  • Apple Safari 5.0+
  • Mozilla Firefox 4.0+
  • Opera 12.0+ (存在问题,参阅 Issue #2080)
  • Microsoft Internet Explorer 10.0+
已知 bugs

Windows 上的 Safari 存在一个 bug,即在 drop 文件的时候会在文件名末尾添加 "" 字符或以其他方式设为非法文件名,并且文件大小会设为 0 字节。虽然再次 drop 相同的文件便正常了。

文件夹拖放

可以对文件夹进行拖放,不过目前只有 Google Chrome 支持。

图像复制粘贴


以下浏览器支持从剪贴板粘贴图像:

  • Google Chrome

上传进度条


以下浏览器支持上传进度条:

桌面浏览器
  • Google Chrome
  • Apple Safari 5.0+
  • Mozilla Firefox 4.0+
  • Opera 12.0+
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+
  • Opera Mobile 12.0+
上传进度事件的差异

受文件大小、操作系统和网络吞吐量有所不同的影响,触发进度事件的频率可能会不尽相同。

例如在 Windows XP 上,Google Chrome 可能在文件上传 100KB 后仅触发一次进度事件,但在 Windows 7 和 Mac OSX 上会为同一文件触发多个进度事件(使用 Google Chrome 22 测试)。

另请注意,已知某些分析网络流量的程序会干扰触发进度事件的次数,例如 Web 调试代理或防火墙/防病毒软件。

图像预览


以下浏览器支持上传文件前的图像预览:

桌面浏览器
  • Google Chrome
  • Apple Safari 6.0+
  • Mozilla Firefox 3.6+
  • Opera 11.0+
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+
  • Default Browser 于 Android 3.2+
已知 bugs
  • Android 4.1.2 上的默认浏览器似乎不支持图像预览。

文件元数据


以下浏览器会在上传文件之前提供完整的文件元数据:

桌面浏览器
  • Google Chrome
  • Apple Safari 4.0+
  • Mozilla Firefox 3.6+
  • Opera 10.0+
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+
  • Default Browser 于 Android 3.2+
  • Opera Mobile 12.0+
文件元数据属性

提供的文件元数据包含以下属性:

  • name: 文件名,例如 banana.jpg
  • size: 文件大小,单位 bytes,例如 130073 (131 KB)。
  • type: 文件类型,例如 image/jpg
已知 bugs

Android 4.1.2 上的默认浏览器不提供文件类型。

XMLHttpRequest 文件上传


以下浏览器支持 XHR 文件上传,换言之其也支持文件上传 API 这类更高级的功能:

桌面浏览器
  • Google Chrome
  • Apple Safari 5.0+
  • Mozilla Firefox 4.0+
  • Opera 12.0+
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+
  • Default Browser 于 Android 3.2+
  • Opera Mobile 12.0+
Iframe 传输

除上述外的浏览器都需要使用 Iframe 传输。Iframe 传输方式通过文件 input 选择框来上传文件。

分块上传


以下浏览器支持将文件分成多块进行上传:

桌面浏览器
  • Google Chrome
  • Apple Safari 6.0+
  • Mozilla Firefox 4.0+
  • Opera 12.0+(存在问题,Opera 无法正确上传 Blob 对象)
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+

图像大小调整功能


以下浏览器支持客户端图像大小调整功能:

桌面浏览器
  • Google Chrome
  • Apple Safari 6.0+
  • Mozilla Firefox 4.0+
  • Opera 12.0+(存在问题,Opera 无法正确上传 Blob 对象)
  • Microsoft Internet Explorer 10.0+
移动端浏览器
  • Apple Safari Mobile 于 iOS 6.0+
  • Google Chrome 于 iOS 6.0+
  • Google Chrome 于 Android 4.0+

跨域文件上传


所有浏览器都支持跨域文件上传。

不管通过本机 CORS(Cross Origin Resource Sharing 跨源资源共享) 功能还是通过 Iframe 传输

关于更多说明及依赖条件,请参阅跨域上传