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

所属分类:输入-上传

 84984  259  查看评论 (54)
基于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


相关插件-上传

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 29188  120

zyupload图片上传修改版V2.0

在原zyupload基础上增加了放大,删除,目录选择功能 。同时修改了原作者中的删除图片后该图片不能再次上传的BUG
  上传
 4278  25

jquery头像上传剪裁插件cropper

cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 50881  359

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 31584  164

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

    命运◎黑曼巴 0
    2018/6/14 13:14:10
    请问怎么指定上传的路劲啊,求指教..万分感谢
        命运◎黑曼巴0
        2018/6/14 14:11:18
        已经搞定了....
    回复
    wosiribenren 0
    2018/4/10 14:12:01
    上传的时候报SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.什么原因 回复
    wosiribenren 0
    2018/4/10 14:08:13
    SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data. 回复
    ?の小№、滩♂~~ 0
    2018/4/8 12:01:46
    请问后台返回前台的数据除了相取得文件本身信息还要什么额外参数 回复
    lunustc 0
    2018/2/5 16:15:26
    我用了iframe之后 有个updateModal.location.href="localhost:8080update" 然后在iframe中引用此js 设置uploadUrl=“http:localhost:8080uploadPicture”是无效的会直接进入“localhost:8080update”的controller 回复
    呼呼呼呼呼呼 0
    2017/11/6 17:39:09

    怎么使用中文?

    回复
    夏日玫瑰 0
    2017/10/31 18:10:59

    点击上传按钮,怎么回调,绑定其他事件,

    回复
    森林狼 0
    2017/10/29 16:57:06
    file input 为什么上传文件是会报错 回复
    想想 0
    2017/8/16 8:46:00

    好东西,感谢分享!

    回复
    abcllfqj 0
    2017/7/27 9:47:14

    移除一个文件后上传,其它文件也没有了,这是什么原因,有没有最新版的

    回复
取消回复