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

所属分类:输入-上传

 25545  76  查看评论 (14)
jQuery HTML5文件上传美化插件jQuery.filer ie兼容10

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" />

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


相关插件-上传

jquery上传插件pictureHandle.js

基于jquery上传插件pictureHandle.js,带压缩、且代码注释全
  上传
 11491  25

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 24689  102

jQuery File Upload-jQuery上传插件

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。
  上传
 1021940  450

BootstrapFileInput 图片上传插件 详解

样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用
  上传
 271593  149

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    LiCnn 0
    2017/8/2 10:14:09
    a3098127425 0
    2017/7/21 10:04:05

    大神们,请问一下PHP怎么给它生成一个 唯一的文件名??

        JoviChin0
        2017/11/8 10:50:24

        用时间戳

    回复
    ˉ 本本分分小青年 0
    2017/6/8 15:22:24

    传输到后台tmp_name路径不对啊 

    回复
    JobsSmile 0
    2017/4/28 20:00:27

    如果Java做后台怎么使用呢?为什么我传不上去图片

    回复
    somewhere only we know 0
    2017/3/30 21:25:47

    想问一下 选择多个文件上传时 怎么实现等一个文件上传完之后再上传下一个文件

        JobsSmile0
        2017/4/28 19:53:06

        知道Java怎么用吗,前台怎么提交的?

        我是星星我会发光0
        2017/8/11 13:56:04

        用FormData

    回复
    寻找我们低调的幸福 0
    2017/3/27 21:43:29

    这个在哪里请求接口上传到服务器的?

    回复
    YUOOOOO 0
    2017/3/22 10:28:30

    很好用啊

        中国好小伙0
        2017/4/19 10:16:16

        为什么我使用uploadfile进行文件上传进入error错误的方法中

        JobsSmile0
        2017/4/28 19:48:43

        怎么使用的,我用Java做的后台,接收不到前台提交的文件啊,不知道怎么提交文件

    回复
    Hey_girl 0
    2017/1/11 16:01:37
    想问一下怎么移除已经选择的文件 回复
    keiopen 0
    2016/12/22 17:12:13
取消回复