HTML5文件上传组件美化jQuery插件

PetitQ 表单/表格 2018-11-11 1.97K 0 0

jQuery.filer 是一款简单的 HTML5 文件上传组件美化 jQuery 插件。它能够完成单文件和多文件的上传，支持文件的拖拽，支持不同的文件格式校验，支持缩略图和图标等，是一款非常实用的文件上传插件。它的特点还有：

对文件上传 File Input 组件进行美化

也想出现在这里？联系我们吧

支持多文件上传

支持校验文件：大小，扩展名等

支持创建文件的缩略图

每种类型的文件可以自定义图标

可以为缩略图，图标和 input 自定义模板和主题

可以移出已选择的文件

可以从剪切板粘贴图片

所有的图标在一个字体文件中

支持文件拖拽

使用方法

使用该文件上传插件需要在页面头部引入 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."

```
        }
```
```
    }
```

HTML5 文件上传组件美化 jQuery 插件

已有 492 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

HTML5文件上传组件美化jQuery插件

使用方法

HTML 结构

初始化插件

配置参数

HTML5 文件上传组件美化 jQuery 插件

相关文章

Bootstrap4下拉框功能强化插件

CSS3扁平风格价格表样式特效代码

多步骤注册表单form特效

发表回复取消回复

热销模板

表单/表格

使用方法

HTML 结构

初始化插件

配置参数

HTML5 文件上传组件美化 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复