简要教程jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件。它的特点还有:对文件上传File Input组件进行美化支持多文件上传 ...
简要教程
jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件。它的特点还有:
- 对文件上传File Input组件进行美化
- 支持多文件上传
- 支持校验文件:大小,扩展名等
- 支持创建文件的缩略图
- 每种类型的文件可以自定义图标
- 可以为缩略图,图标和input自定义模板和主题
- 可以移出已选择的文件
- 可以从剪切板粘贴图片
- 所有的图标在一个字体文件中
- 支持文件拖拽
安装
可以通过bower来安装该文件上传插件。
使用方法
使用该文件上传插件需要在页面头部引入jQuery.filer的样式文件。
< link href = "./css/jquery.filer.css" type = "text/css" rel = "stylesheet" /> |
引入jQuery和jquery.filer.min.js文件。
< script src = "http://code.jquery.com/jquery-latest.min.js" ></ script > |
HTML结构
最简单的文件上传HTML结构如下:
< form action = "./php/upload.php" method = "post" enctype = "multipart/form-data" > |
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该文件上传插件。
$(document).ready( function () { |
配置参数
limit
:最大上传文件的数量,类型:Number,默认值为:null。maxSize
:上传文件的最大尺寸,单位MB。类型:Number,默认值为:null。extensions
:可上传的文件的文件扩展名。类型:Array,默认值为:null。changeInput
:创建一个新的文件上传input元素。你可以使用默认的模板或自己编写自己的模板。类型:Boolean, String, Function, Object,默认值为:true。showThumbs
:显示文件预览。类型:Boolean,默认值为: false。appendTo
:目标缩略图的目标元素选择器。当需要在指定的元素上添加文件预览时使用该选项。类型:String,默认值为:null。theme
:指定jQuery.filer的主题。类型:String,默认值为:null。templates
:指定文件预览的模板,选择器和一些参数。uploadFile
:启用即时文件上传功能。在这个对象中,你可以指定普通jQuery的$.ajax参数或回调函数。dragDrop
:允许文件拖拽功能。在该对象中可以指定回调函数。addMore
:允许选择多个文件。类型:Boolean,默认值为: false。clipBoardPaste
:允许粘贴拷贝图片。类型:Boolean,默认值为: false。excludeName
:在移除文件的时候,插件会创建一个隐藏域,name
属性将使用该参数。默认值为: jfiler-items-exclude-(input file name)-(input index)。files
:已经上传的文件。beforeRender
:在渲染jQuery.filer input之前触发。afterRender
:在渲染jQuery.filer input之后触发。beforeShow
:在显示缩略图之前触发。afterShow
:在显示缩略图之后触发。beforeSelect
:在选择一个文件之后,并在将该文件添加到input之前触发。该函数返回一个布尔值。onSelect
:在选择一个文件之后触发。onRemove
:在移除一个文件之后触发。onEmpty
:在没有文件被选择的时候触发。options
:在对象中定义自己的参数,定义之后可以在任何地方使用。captions
:指定自己的标题。全能程序员交流QQ群290551701,聚集很多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!
原标题:HTML5文件上传组件美化jQuery插件
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。