样式指南


File input 样式


为了实现“添加文件”按钮的跨浏览器样式,我们会把 file input 元素置为透明,且放到 fileinput-button 标签的顶部 - 请参考 jquery.fileupload.css 中关于 "fileinput-button" 类的定义。

为什么不能以编程方式触发 input 框的文件选择?

作为安全预防措施,大多数浏览器其 input 字段若没有触发 click 事件(或 keyboard 事件),它会阻止文件的提交行为。一些浏览器(例如 Google Chrome)只是阻止 click 事件,与此同时像 Internet Explorer,针对编程方式触发的文件 input 框,它会不提交任何文件内容。

Firefox 4(及更高版本)是目前唯一支持在 hidden 类型(display: none)的 input 框上调用 click 事件的浏览器。

Bootstrap UI


当前版本的插件的界面是基于 Twitter 的 Bootstrap v3 构建的,所以其元素样式都源自 Bootstrap v3。

请注意:如果你想使用 Bootstrap v4(或更高版本),你需要设置以下配置项:

$('#fileupload').fileupload({
  showElementClass: 'show'
});

另请参阅:https://github.com/blueimp/jQuery-File-Upload/issues/3537