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

所属分类:输入-上传

 74551  228  查看评论 (48)
基于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


相关插件-上传

zyupload四种不同的上传PHP版

PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。
  上传
 17139  59

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

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

jQuery多图上传图片上传精简版

配置简单功能强大支持进度条限制上传类型文件大小文件数量轻松配置后端值需要写个接口接收文件返回指定信息便可轻松搞定。
  上传
 14853  45

BootstrapFileInput 图片上传插件 详解

样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用
  上传
 281198  157

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

    呼呼呼呼呼呼 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

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

    回复
    Shemar° 0
    2017/7/24 17:50:13

    好资源,谢谢楼主分享。

    回复
    小小白先森℡ 0
    2017/6/15 16:27:54

    怎么设置为空的时候,也可以提交表单按钮啊

        小小白先森℡0
        2017/6/15 16:35:30
        minFileCount: 0,

         已经解决,哈哈哈哈哈哈哈。

    回复
    萌小呆、。 0
    2017/5/26 9:40:19
    大神,怎么在使用ajax上传文件时可以添加额外的表单信息啊?可以加我qq指导一下么841757192
        ydp1
        2017/11/13 15:32:51
        uploadExtraData: function(previewId, index) { //额外参数的关键点   
            var obj = {};
            obj.repertoryId = fodderType();
            console.log(obj);
            return obj;
        }
    回复
    yush329 0
    2017/5/10 18:07:18

    实测好使! 辛苦UP了

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

    如何调用回调啊?

    回复
取消回复