简要教程jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传，支持文件的拖拽，支持不同的文件格式校验，支持缩略图和图标等，是一款非常实用的文件上传插件。它的特点还有：
对文件上传File Input组件进行美化支持多文件上传支持校验文件：大小，扩展名等支持创建文件的缩略图每种类型的文件可以自定义图标可以为缩略图，图标和input自定义模板和主题可以移出已选择的文件可以从剪切板粘贴图片所有的图标在一个字体文件中支持文件拖拽 安装可以通过bower来安装该文件上传插件。
$ bower install jquery.filer
使用方法使用该文件上传插件需要在页面头部引入jQuery.filer的样式文件。
<linkhref="./CSS/jquery.filer.css"type="text/css"rel="stylesheet"/>
<linkhref="./css/themes/jquery.filer-dragdropbox-theme.css"type="text/css"rel="stylesheet"/>
引入jQuery和jquery.filer.min.js文件。
<scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script>
<scriptsrc="./js/jquery.filer.min.js"></script>
HTML结构最简单的文件上传HTML结构如下：
<formaction="./php/upload.php"method="post"enctype="multipart/form-data">
<inputtype="file"name="files[]"id="filer_input"multiple="multiple">
<inputtype="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."
}
}
全能程序员交流QQ群290551701，聚集很多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!