素材牛VIP会员

jQuery HTML5文件上传表单美化插件jQuery.filer

 所属分类:网页殊效-表单殊效

 浏览:2274次-  下载:11次-  评论:0次-  更新时间:2016-12-14
jQuery HTML5文件上传表单美化插件jQuery.filer兼容IE10
积分辩明:注册即送15牛币,逐日签到可取得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多解释»
项目地址(website):http://filer.grandesign.md/#documentation
素材描述: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" />

引入jQuery和jquery.filer.min.js文件。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.filer.min.js"></script>

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."
    }
}

相干素材 - 表单殊效

评论辩论这个素材(0)答复他人成绩或分享运居心得会嘉奖牛币

〒_〒 居然一个评论都没有……

 文明上彀,理性说话!   😉 阿里云荣幸券,戳我支付
我的牛币余额:0 已下载次数:11
所需牛币:1 开端下载

牛币获得:签到、评论、充值    » 在线充值(10牛币=1元)