jQuery Filer : jQuery Html5 File Uploader 多文件上传

jQuery.filer – Simple HTML5 File Uploader, a plugin tool for jQuery which change completely File Input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-screen upload and many other features and options.

 

 

jQuery.filer 1.0.2

jQuery.filer - Simple HTML5 File Uploader, a plugin tool for jQuery which change completely File Input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-screen upload and many other features and options.

Demo | Documentation | Support

 

Features

• Completely change File Input
• Upload files after choosing
• Add more files to input without uploading them
• Validate files(limit, size, extension)
• Create thumbs
• Custom icons for each type of file
• Custom templates & themes for: input, thumbs, icons
• Remove Choosed/Uploaded files
• Append existing files to input for a preview
• Image paste from clipboard
• Custom captions
• Custom callbacks
• Templates inline variables, ex: {{fi-limit}}
• All icons in a one beautiful font
• Drag & Drop Option
• Trigger options

用法：

 

Styles:

Include the jquery.filer css file in your html page.

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

 

 

Scripts:

Include the jQuery library and jquery.filer script file in your html page.

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

 

 

HTML:

Create an input file element.

<form action="./php/upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" id="input_file" multiple="multiple">
    <input type="submit">
</form>

 

 

Javascript:

The plugin is named "filer" and can be applied to any element. You will probably also specify some options while applying the plugin. If you are not familiar with jQuery, please, read this tutorial for beginners.

$(document).ready(function() {
    $('#input_file').filer({
        limit: null,
        maxSize: null,
        extensions: null,
        changeInput: true,
        showThumbs: true,
        appendTo: null,
        theme: "default",
        templates: {
            box: '<ul class="jFiler-item-list"></ul>',
            item: '<li class="jFiler-item">
                        <div class="jFiler-item-container">
                            <div class="jFiler-item-inner">
                                <div class="jFiler-item-thumb">
                                    <div class="jFiler-item-status"></div>
                                    <div class="jFiler-item-info">
                                        <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>
                                    </div>
                                    {{fi-image}}
                                </div>
                                <div class="jFiler-item-assets jFiler-row">
                                    <ul class="list-inline pull-left">
                                        <li>{{fi-progressBar}}</li>
                                    </ul>
                                    <ul class="list-inline pull-right">
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>',
            itemAppend: '<li class="jFiler-item">
                        <div class="jFiler-item-container">
                            <div class="jFiler-item-inner">
                                <div class="jFiler-item-thumb">
                                    <div class="jFiler-item-status"></div>
                                    <div class="jFiler-item-info">
                                        <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>
                                    </div>
                                    {{fi-image}}
                                </div>
                                <div class="jFiler-item-assets jFiler-row">
                                    <ul class="list-inline pull-left">
                                        <span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>
                                    </ul>
                                    <ul class="list-inline pull-right">
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-item-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action',
            }
        },
        uploadFile: {
            url: "./php/upload.php",
            data: {},
            type: 'POST',
            enctype: 'multipart/form-data',
            beforeSend: function(){},
            success: function(data, el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class="jFiler-item-others text-success"><i class="icon-jfi-check-circle"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            error: function(el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class="jFiler-item-others text-error"><i class="icon-jfi-minus-circle"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            statusCode: {},
            onProgress: function(){},
            onComplete: function(){}
        },
        dragDrop: {
            dragEnter: null,
            dragLeave: null,
            drop: null,
        },
        addMore: true,
        clipBoardPaste: true,
        excludeName: null,
        beforeShow: function(){return true},
        onSelect: function(){},
        afterShow: function(){},
        onRemove: function(){},
        onEmpty: function(){},
        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."
            }
        }
    });
});

 

 

Options & Features

Fully documentation of plugin options and features.

Options:

• limit Maximum Limit of files. {null, Number}
• maxSize Maximum Size of files. {null, Number(in MB's)}
• extensions Whitelist for file extension. {null, Array}
• changeInput Change input. {Boolean, String(HTML element), Object(DOM Element)}
• showThumbs Show input files as thumbnails. {Boolean}
• appendTo Append thumbnails to element. {null, String(Dom Element)}
• theme jQuery.filer theme. {null, String}
• templates
  • box Thumbnails box element {null, String}
  • item Thumbnails file item element {String(use Filer Variables), Function}
  • itemAppend Thumbnails appended file item element {String(use Filer Variables), Function}
  • progressBar Thumbnails file item upload progress bar element {String}
  • itemAppendToEnd Append file item to the end of list {Boolean}
  • removeConfirmation Remove file confirmation {Boolean}
  • selectors
    • list List selector {String}
    • item Item selector {String}
    • progressBar Progress bar selector {String}
    • remove Remove button selector {String}
• uploadFile
  • url URL to which the request is sent {String}
  • data Data to be sent to the server {Object}
  • type The type of request {String}
  • enctype Request enctype {String}
  • beforeSend A pre-request callback function {Function}
  • success A function to be called if the request succeeds {Function}
  • error A function to be called if the request fails {Function}
  • statusCode An object of numeric HTTP codes {Object}
  • onProgress A function called while uploading file with progress percentage {Function}
  • onComplete A function called when all files were uploaded {Function}
• dragDrop
  • dragEnter A function that is fired when a dragged element enters the input. {Function}
  • dragLeave A function that is fired when a dragged element leaves the input. {Function}
  • drop A function that is fired when a dragged element is dropped on a valid drop target.
• addMore Multiple file selection without instant uploading {Boolean}
• clipBoardPaste Printscreen paste and upload {Boolean}
• excludeName Removed files input name {null, String} Default: jfiler-items-exclude-(input file name)-(input index)
• beforeShow A function that is fired before showing thunbnails {Function}
• onSelect A function that is fired after selecting files {Function}
• afterShow A function that is fired after appending all thumbnails items {Function}
• onRemove A function that is fired after deleting a file {Function}
• onEmpty A function that is fired when no files are selected {Function}
• captions
  • button New Input button text {String}
  • feedback New Input field text {String}
  • feedback2 New Input after choosing files text {String}
  • drop New Input on drag text {String}
  • removeConfirmation Remove file confirmation text {String}
  • errors
    • filesLimit {String(use Filer Variables)}
    • filesType {String(use Filer Variables)}
    • filesSize {String(use Filer Variables)}
    • filesSizeAll {String(use Filer Variables)}

Triggers:

• $('#input_file').trigger("filer.append", {files:[]})
• $('#input_file').trigger("filer.remove", {id:0})
• $('#input_file').trigger("filer.reset")
• $('#input_file').trigger("filer.getList", {files:[]})
• $('#input_file').trigger("filer.retry", here_is_file_id)

Attributes:

• data-jfiler-name | name of input (is used while applying plugin to a non file input)
• data-jfiler-limit | files limit
• data-jfiler-maxSize | files maximum size
• data-jfiler-extensions | separeted with comma
• data-jfiler-changeInput | {Boolean, String}
• data-jfiler-showThumbs | show thumbnails
• data-jfiler-appendTo | append thumbnails to selector
• data-jfiler-theme | custom filer theme
• data-jfiler-excludeName | exclude files input name
• data-jfiler-files | append files, ex: "{"files":[{"name":"appended_file.jpg","size":5453,"type":"image/jpg",file:"/path/to/file/appended_file.jpg"}]}"

 

 

项目地址：https://github.com/CreativeDream/jquery.filer

下载：jquery.filer-master

转自：jQuery Filer : jQuery Html5 File Uploader 多文件上传