
jQuery.filer
jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件。
它有以下特点:
- 对文件上传File Input组件进行美化
- 支持多文件上传
- 支持校验文件:大小,扩展名等
- 支持创建文件的缩略图
- 每种类型的文件可以自定义图标
- 可以为缩略图,图标和input自定义模板和主题
- 可以移出已选择的文件
- 可以从剪切板粘贴图片
- 所有的图标在一个字体文件中
- 支持文件拖拽
安装
可以通过bower来安装该文件上传插件。
$ bower install jquery.filer
使用方法
使用该文件上传插件需要在页面头部引入jQuery.filer的样式文件。
<link href="./css/jquery.filer.css" type="text/css" rel="stylesheet" />
<link href="./css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />
HTML结构
最简单的文件上传HTML结构如下:
<form action="./php/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="filer_input" multiple="multiple">
<input type="submit" value="Submit">
</form>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该文件上传插件。
$(document).ready(function() {
$('#filer_input').filer();
});
配置参数
- 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:指定文件预览的模板,选择器和一些参数。
{
box: null, //Thumbnail's box element {null, String}
item: null, //File item element {String(use Filer Variables), Function}
itemAppend: null, //File item element for edit mode {String(use Filer Variables), Function}
progressBar: null, //File upload progress bar element {String}
itemAppendToEnd: false, //Append the new file item to the end of the list {Boolean}
removeConfirmation: true, //Remove file confirmation {Boolean}
_selectors: {
list: null, //List selector {String}
item: null, //Item selector {String}
progressBar: null, //Progress bar selector {String}
remove: null //Remove button selector {String}
}
}
uploadFile:启用即时文件上传功能。在这个对象中,你可以指定普通jQuery的$.ajax参数或回调函数。
{
url: null, //URL to which the request is sent {String}
data: null, //Data to be sent to the server {Object}
type: 'POST', //The type of request {String}
enctype: 'multipart/form-data', //Request enctype {String}
beforeSend: null, //A pre-request callback function {Function}
success: null, //A function to be called if the request succeeds {Function}
error: null, //A function to be called if the request fails {Function}
statusCode: null, //An object of numeric HTTP codes {Object}
onProgress: null, //A function called while uploading file with progress percentage {Function}
onComplete: null //A function called when all files were uploaded {Function}
}
dragDrop:允许文件拖拽功能。在该对象中可以指定回调函数。
{
dragEnter: null, //A function that is fired when a dragged element enters the input. {Function}
dragLeave: null, //A function that is fired when a dragged element leaves the input. {Function}
drop: null, //A function that is fired when a dragged element is dropped on a valid drop target. {Function}
}
- addMore:允许选择多个文件。类型:Boolean,默认值为: false。
- clipBoardPaste:允许粘贴拷贝图片。类型:Boolean,默认值为: false。
- excludeName:在移除文件的时候,插件会创建一个隐藏域,name属性将使用该参数。默认值为: jfiler-items-exclude-(input file name)-(input index)。
- files:已经上传的文件。
[
{
name: "appended_file.jpg",
size: 5453,
type: "image/jpg",
file: "/path/to/file.jpg"
},
{
name: "appended_file_2.jpg",
size: 9453,
type: "image/jpg",
file: "path/to/file2.jpg"
}
]
- beforeRender:在渲染jQuery.filer input之前触发。
- afterRender:在渲染jQuery.filer input之后触发。
- beforeShow:在显示缩略图之前触发。
- afterShow:在显示缩略图之后触发。
- beforeSelect:在选择一个文件之后,并在将该文件添加到input之前触发。该函数返回一个布尔值。
- onSelect:在选择一个文件之后触发。
- onRemove:在移除一个文件之后触发。
- onEmpty:在没有文件被选择的时候触发。
- options:在对象中定义自己的参数,定义之后可以在任何地方使用。
- captions:指定自己的标题。
{
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
搜索发现
-
1
-
2
-
3
- 4 jQuery nav导航(原创)
- 5 轮菜单
- 6 简易使用的导航栏
- 7 类似于Jquery的JS下拉菜单
- 8 jQuery树形组件(原创)
- 9 仿今日头条App顶部导航点击可居中(优化版)
- 10 jQuery仿flash导航代码
- 11 paging 分页插件
- 12 简易的动态生成表格和分页效果(原创)
- 13 jQuery分页插件jQuery.pager.js
- 14 css3回转菜单
- 15 jQuery水平方向菜单导航条 滑块伴随鼠标移动(原创)
-
1
仿浏览器主页搜索(原创)10550
-
2
angularjs日期选择插件10470
-
3
vue2.0实现全选,全不选。10462
- 4 jQuery QWERTY软键盘插件Virtual Keyboard
- 5 js汉字转拼音
- 6 jQuery环型进度倒计时
- 7 jquery表单验证插件form_validation.js
- 8 vue移动端优惠券模板
- 9 前端MD5加密插件md5.pro.js
- 10 jQuery多功能网页键盘插件
- 11 jQuery实现汉字转拼音的插件
- 12 jQuery拖拽插件Magnet.js
- 13 jQuery输入框数值加减调整插件
- 14 vue购物结算页面模板
- 15 jQuery倒计时插件countdown.js