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

所属分类:输入-上传

 54447  178  查看评论 (37)
基于Bootstrap 3可预览的HTML5文件上传插件 ie兼容10

更新时间:2016-11-1

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

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

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

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

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

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

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

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

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

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

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


使用该文件上传插件首先要引入需要的外部依赖文件和fileinput.min.js及fileinput.min.css文件。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="jquery/2.1.1/jquery.min.js"></script>
<script src="path/to/js/fileinput.min.js"></script>
<!-- bootstrap.js below is only needed if you wish to the feature of viewing details
     of text file preview via modal dialog -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include
    locale file as mentioned below -->
<script src="path/to/js/fileinput_locale_<lang>.js"></script>


配置参数

showCaption:是否显示文件的标题。默认值true。

showPreview:是否显示文件的预览图。默认值true。

showRemove:是否显示删除/清空按钮。默认值true。

showUpload:是否显示文件上传按钮。默认是submit按钮,除非指定了uploadUrl属性。默认值true。

showCancel:是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。

captionClass:在标题容器上额外的class。类型string。

previewClass:在预览区域容器上的额外的class。类型string。

mainClass:添加在文件上传主容器。类型string。

initialDelimiter:在initialPreview属性中用于上传多个文件时的分隔符。默认值:'*$$*'。

initialPreview:类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串,会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组,初始化预览图中会显示数组中所有的文件。

下面的CSS样式用于显示各种不同类型的文件预览图:

image files:CSS样式为file-preview-image

text files:CSS样式为file-preview-text

other files:CSS样式为file-preview-other


相关插件-上传

HTML5 图片上传(pc ,手机都能适配)

图片上传(pc ,手机都能适配)
  上传
 54385  87

百度上传插件Web Uploader

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。
  上传
 92753  197

Plupload文件上传插件

Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。
  上传
 102626  123

上传图片-可裁剪

上传图片可裁剪
  上传
 42230  75

讨论这个项目(37)回答他人问题或分享插件使用方法奖励jQ币

    胖不了先生 0
    2017/4/24 15:16:11

    如何调用回调啊?

    回复
    Lion 0
    2017/4/14 15:11:55

    多文件上传,请问下移除了一个文件后,怎么其它文件上传时也不见了

    回复
    Lion 0
    2017/4/14 15:10:17

    多文件上传,请问下移除了一个文件后,怎么其它文件上传时也不见了

    回复
    zouguodii 0
    2017/3/17 11:06:12

    为什么使用插件的时候一直报403错误(请高手加qq:843429952 指导,谢谢!)浏览器报错F12:POST http://localhost:8081/user/uploadPicture?callback=jQuery111106485441511342465_1489719714451 403 ()

    插件报错:{"timestamp":1489719724898,"status":403,"error":"Forbidden","message":"Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'.","path":"/user/uploadPicture"}
    回复
    zouguodii 0
    2017/3/17 11:04:50

    为什么使用插件的时候一直报403错误POST http://localhost:8081/user/uploadPicture?callback=jQuery111106485441511342465_1489719714451 403 ()

    {"timestamp":1489719724898,"status":403,"error":"Forbidden","message":"Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'.","path":"/user/uploadPicture"}
    回复
    С卩 X ◇ 0
    2016/12/13 9:12:47
    追风 0
    2016/12/5 14:12:22
    谁知道如何限制图片上穿数量啊
        怀念★往事0
        2017/3/31 16:40:29

        maxFileCount: 1,

        怀念★往事1
        2017/3/31 17:14:45
        有看到几种说法,maxFilesNum: 3,msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",你都测试一下吧
        怀念★往事1
        2017/3/31 17:31:48

        因为我也正好需要使用这个插件,所以将测试结果告知你一下。。。

                maxFileCount: 2, //允许上传最大值

                maxFileSize: 1000,  //允许上传最大规格

        input 中 加入 “multiple” 则修改单张上传或多张上传

    回复
    Dream 丶 1
    2016/11/1 17:11:15
    这个版本已经是很旧的了,下载新版本后就能用了
        西瓜0
        2016/11/1 21:11:09
        感谢反馈,以更新到最新版。
    回复
    Dream 丶 0
    2016/10/23 17:10:21
    能成功上传,然而完全不知道回调怎么使用,slugCallback 没效果 回复
    水淹 0
    2016/9/22 14:09:27
    请问怎么去掉预览图效果,因为上传zip压缩包预览图是乱码,请指导下。 回复
取消回复