HTML5 File Upload widget beautify jquery plugin

Brief tutorials

Jquery.filer is a simple HTML5 file upload component to beautify the jquery plugin. It can complete single file and multi-file upload, support file drag and drop, support different file format check, support thumbnail and icon, etc., is a very useful file upload plugin. It is also characterized by:

• Document upload file input component to beautify
• Multi-File Upload support
• Support checksum file: size, extension, etc.
• Support for creating thumbnail images of files
• Each type of file can be customized icon
• Templates and themes can be customized for thumbnails, icons, and input
• Can move out of a selected file
• You can paste pictures from the Clipboard
• All the icons in a font file
• Support File drag and drop

installation

You can install the file upload plugin via bower.

$ bower install jquery.filer

How to use

Uploading plugins using this file requires the introduction of a Jquery.filer style file at the head of the 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" />

Introduce jquery and jquery.filer.min.js files.

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

HTML Structure

The simplest file upload HTML structure is as follows:

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

Initializing plug-ins

After the page DOM element has finished loading, you can initialize the file upload plugin by using the following method.

$(document).ready(function() {     $(‘#filer_input‘).filer();       });

Configuration Parameters

• limit: Maximum number of uploaded files, type: #, the default value is: null.
• maxSize: The maximum size of the uploaded file, in megabytes. Type: number, the default value is: null.
• extensions: The file name extension of the file that can be uploaded. Type: Array, the default value is: null.
• changeInput: Create a new file to upload the INPUT element. You can use the default template or write your own template yourself. Type: Boolean, String, Function, Object, default value: True.
• showThumbs: Displays a preview of the file. Type: Boolean, the default value is: false.
• appendTo: The target element selector for the target thumbnail. This option is used when you need to add a file preview on the specified element. Type: String, the default value is: null.
• theme: Specifies the subject of the Jquery.filer. Type: String, the default value is: null.
• templates: Specifies the template, selector, and some parameters for the file preview.

  {    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: Enables the Instant file upload feature. In this object, you can specify the $.ajax parameter or callback function for ordinary jquery.

  {    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: Allows file drag and drop function. You can specify a callback function in this object.

  {      dragenter: null //a function that's fired when A dragged element enters the input. {Function}      dragleave: null //a function that's fired when A dragged element leaves the input. {Function}      drop: null //a function that was fired when a dragged element was dropped on a valid drop target. {Function}

• addMore: Allows multiple files to be selected. Type: Boolean, the default value is: false.
• clipBoardPaste: Allows you to paste the copied picture. Type: Boolean, the default value is: false.
• excludeName: When removing a file, the plugin creates a hidden field, which name is used by the property. The default value is: jfiler-items-exclude-(input file name)-(input index).
• files: Files that have been uploaded.

  [    {        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: Triggered before rendering Jquery.filer input.
• afterRender: Triggered after rendering Jquery.filer input.
• beforeShow: Triggered before the thumbnail is displayed.
• afterShow: Triggered after a thumbnail is displayed.
• beforeSelect: After a file is selected and triggered before the file is added to input. The function returns a Boolean value.
• onSelect: triggered after selecting a file.
• onRemove: Triggered after a file has been removed.
• onEmpty: Triggers when no files are selected.
• options: Define your own parameters in the object, which can be used anywhere.
• captions: Specify your own title.

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

  All-in-one programmer Exchange QQ Group 290551701, gather a lot of Internet elite, technical director, architect, Project Manager! Open source technology research, Welcome to the industry, Daniel and beginners are interested in engaging in IT industry personnel to enter!

HTML5 File Upload widget beautify jquery plugin