人靠衣装,机靠壳装

基于Bootstrap3可预览的HTML5文件上传插件

2015-07-28 08:48 发布

JS代码|

admin
00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

niuqiqi151723.jpg


bootstrap-fileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果,可同时选择多个文件。该插件使用bootstrap CSS3样式来制作文件上传界面,美观大方。并且它提供了多国语言,你可以选择使用中文。


该文件上传插件比普通的文件上传插件功能更强大,它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外,它还可以基于AJAX上传文件,拖拽上传文件,查看上传进度,可以选择性的预览,添加或删除文件。


该文件上传插件的特点有:

AJAX上传功能基于HTML5 FormData(绝大多数现代浏览器都支持该属性)。在不支持该属性的浏览器中会回退为普通的文件上传组件。使用AJAX必须设置uploadUrl属性。

允许你添加、移除和追加文件。添加的文件可以生成预览图。

可以将文件拖拽到指定区域来上传文件。

可以一个个的删除或更新文件,也可以同时完成这些操作。

如果showPreview属性设置为false,或者浏览器不支持uploadUrl属性,将会回退为普通的文件上传组件。

可以配置文件上传等待指示,文件上传成功信息,文件上传出错信息。

在使用ajax上传文件时可以添加额外的表单信息。

可以显示文件当前上传的进度。

可以取消和终止当前正在上传的任务。

文件上传完毕会自动刷新预览区域的内容。


插件外部依赖需求

Bootstrap 3.x

最新版本的jQuery

大 多数现代浏览器都支持HTML5(inputs和FileReader AP),CSS3和jQuery。对于IE浏览器,必须是IE10以上的版本。IE9及以下的版本会回退为普通的文件上传组件,并且不支持选择多个文件和 HTML 5 FileReader API。

AJAX上传需要浏览器支持HTML5 FormData和XHR2 (XMLHttpRequest 2)。大多数现代浏览器都支持FormData和XHR2。在不支持这些特性的浏览器中将会回退为普通的文件上传组件。


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码