Filer.js — это плагин jQuery для быстрой и удобной загрузки файлов.
Простой пример filer.js, как показано ниже —
<html xmlns = "https://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /> <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--> <script type = "text/javascript" src = "https://code.jquery.com/jquery-latest.min.js"> </script> <script type = "text/javascript" src = "js/jquery.filer.min.js"></script> <script type = "text/javascript"> $(document).ready(function() { $('#input1').filer(); $('.file_input').filer({ showThumbs: true, 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><span class = "jFiler-item-others"> {{fi-icon}} {{fi-size2}}</span></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: true, removeConfirmation: true, _selectors: { list: '.jFiler-item-list', item: '.jFiler-item', progressBar: '.bar', remove: '.jFiler-item-trash-action', } }, addMore: true, files: [{ name: "appended_file.jpg", size: 5453, type: "image/jpg", file: "https://dummyimage.com/158x113/f9f9f9/191a1a.jpg", },{ name: "appended_file_2.png", size: 9503, type: "image/png", file: "https://dummyimage.com/158x113/f9f9f9/191a1a.png", }] }); $('#input2').filer({ limit: null, maxSize: null, extensions: null, changeInput: ' <div class = "jFiler-input-dragDrop"> <div class = "jFiler-input-inner"> <div class = "jFiler-input-icon"> <i class = "icon-jfi-cloud-up-o"></i> </div> <div class = "jFiler-input-text"> <h3>Drag&Drop files here</h3> <span style = "display:inline-block; margin: 15px 0">or</span> </div> <a class = "jFiler-input-choose-btn blue">Browse Files</a> </div> </div>', showThumbs: true, appendTo: null, theme: "dragdropbox", 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: false, _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(){}, }, dragDrop: { dragEnter: function(){}, dragLeave: function(){}, drop: function(){}, }, 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." } } }); }); </script> <style> .file_input{ display: inline-block; padding: 10px 16px; outline: none; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; font-family: sans-serif; font-size: 11px; font-weight: bold; border-radius: 3px; color: #008BFF; border: 1px solid #008BFF; vertical-align: middle; background-color: #fff; margin-bottom: 10px; box-shadow: 0px 1px 5px rgba(0,0,0,0.05); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .file_input:hover, .file_input:active { background: #008BFF; color: #fff; } </style> <!--[if IE]> <script src = "https://html5shiv.googlecode.com/svn/trunk/html5.js" > </script> <![endif]--> </head> <body> <div> <form action = "./php/upload.php" method = "post" enctype = "multipart/form-data"> <!-- filer 1 --> <input type = "file" multiple = "multiple" name = "files[]" id = "input1"> <br> <input type = "submit"> </form> </div> <br> <hr> <br> <div> <form action = "./php/upload.php" method = "post" enctype = "multipart/form-data"> <!-- filer 2 --> <a class = "file_input" data-jfiler-name = "files" data-jfiler-extensions = "jpg, jpeg, png, gif"> <i class = "icon-jfi-paperclip"></i> Attach a file</a> <br> <input type = "submit"> </form> </div> <br> <hr> <br> <div style = "background: #f7f8fa;padding: 50px;"> <!-- filer 3 --> <input type = "file" multiple = "multiple" name = "files[]" id = "input2"> </div> </body> </html>
Это должно привести к следующему результату —