Filer.js \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d jQuery \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n\n\n\n
\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 filer.js, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435 \u2014<\/p>\n\n\n\n
<html xmlns = \"https:\/\/www.w3.org\/1999\/xhtml\">\n <head>\n <meta http-equiv = \"Content-Type\" content = \"text\/html; charset = utf-8\" \/>\n <link href = \"css\/jquery.filer.css\" type = \"text\/css\" rel = \"stylesheet\" \/>\n <link href = \"css\/themes\/jquery.filer-dragdropbox-theme.css\" \n type = \"text\/css\" rel = \"stylesheet\" \/>\n\n <!--jQuery-->\n\t\t\n <script type = \"text\/javascript\" \n src = \"https:\/\/code.jquery.com\/jquery-latest.min.js\">\n <\/script>\n <script type = \"text\/javascript\" src = \"js\/jquery.filer.min.js\"><\/script>\n\t\t\t\n <script type = \"text\/javascript\">\n $(document).ready(function() {\n $('#input1').filer();\n \n $('.file_input').filer({\n showThumbs: true,\n templates: {\n box: '<ul class = \"jFiler-item-list\"><\/ul>',\n item: '<li class = \"jFiler-item\">\\\n\t\t\t\t\t\t\n <div class = \"jFiler-item-container\">\\\n <div class = \"jFiler-item-inner\">\\\n\t\t\t\t\t\t\t\n <div class = \"jFiler-item-thumb\">\\\n <div class = \"jFiler-item-status\"><\/div>\\\n <div class = \"jFiler-item-info\">\\\n <span class = \"jFiler-item-title\"><\n b title = \"{{fi-name}}\">{{fi-name | \n limitTo: 25}}<\/b><\/span>\\\n <\/div>\\\n {{fi-image}}\\\n <\/div>\\\n\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-assets jFiler-row\">\\\n <ul class = \"list-inline pull-left\">\\\n <li><span class = \"jFiler-item-others\">\n {{fi-icon}} {{fi-size2}}<\/span><\/li>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\n <ul class = \"list-inline pull-right\">\\\n <li><a class = \"icon-jfi-trash\n jFiler-item-trash-action\"><\/a><\/li>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\n <\/div>\\\n\t\t\t\t\t\t\t\t\n <\/div>\\\n <\/div>\\\n <\/li>',\n\t\t\t\t\t\t\n itemAppend: '<li class = \"jFiler-item\">\\\n\t\t\t\t\t\t\n <div class = \"jFiler-item-container\">\\\n <div class = \"jFiler-item-inner\">\\\n <div class = \"jFiler-item-thumb\">\\\n <div class = \"jFiler-item-status\"><\/div>\\\n <div class = \"jFiler-item-info\">\\\n <span class = \"jFiler-item-title\"><\n b title = \"{{fi-name}}\">{{fi-name |\n limitTo: 25}}<\/b><\/span>\\\n <\/div>\\\n {{fi-image}}\\\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-assets jFiler-row\">\\\n <ul class = \"list-inline pull-left\">\\\n <span class = \"jFiler-item-others\">\n {{fi-icon}} {{fi-size2}}<\/span>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\t\n <ul class = \"list-inline pull-right\">\\\n <li><a class = \"icon-jfi-trash \n jFiler-item-trash-action\"><\/a><\/li>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\t\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\n <\/div>\\\n <\/div>\\\n <\/li>',\n\t\t\t\t\t\t\n progressBar: '<div class = \"bar\"><\/div>',\n itemAppendToEnd: true,\n removeConfirmation: true,\n\t\t\t\t\t\t\n _selectors: {\n list: '.jFiler-item-list',\n item: '.jFiler-item',\n progressBar: '.bar',\n remove: '.jFiler-item-trash-action',\n }\n },\n\t\t\t\t\t\n addMore: true,\n\t\t\t\t\t\n files: [{\n name: \"appended_file.jpg\",\n size: 5453,\n type: \"image\/jpg\",\n file: \"https:\/\/dummyimage.com\/158x113\/f9f9f9\/191a1a.jpg\",\n },{\n name: \"appended_file_2.png\",\n size: 9503,\n type: \"image\/png\",\n file: \"https:\/\/dummyimage.com\/158x113\/f9f9f9\/191a1a.png\",\n }]\n });\n \n $('#input2').filer({\n limit: null,\n maxSize: null,\n extensions: null,\n changeInput: '\n\t\t\t\t\t\n <div class = \"jFiler-input-dragDrop\">\n <div class = \"jFiler-input-inner\">\n\t\t\t\t\t\t\n <div class = \"jFiler-input-icon\">\n <i class = \"icon-jfi-cloud-up-o\"><\/i>\n <\/div>\n\t\t\t\t\t\t\t\n <div class = \"jFiler-input-text\">\n <h3>Drag&Drop files here<\/h3> \n <span style = \"display:inline-block; \n margin: 15px 0\">or<\/span>\n <\/div>\n\t\t\t\t\t\t\t\n <a class = \"jFiler-input-choose-btn blue\">Browse Files<\/a>\n\t\t\t\t\t\t\t\t\n <\/div>\n <\/div>',\n\t\t\t\t\t\n showThumbs: true,\n appendTo: null,\n theme: \"dragdropbox\",\n\t\t\t\t\t\n templates: {\n box: '<ul class = \"jFiler-item-list\"><\/ul>',\n item: '<li class = \"jFiler-item\">\\\n <div class = \"jFiler-item-container\">\\\n <div class = \"jFiler-item-inner\">\\\n\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-thumb\">\\\n <div class = \"jFiler-item-status\"><\/div>\\\n\t\t\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-info\">\\\n <span class = \"jFiler-item-title\">\n <b title = \"{{fi-name}}\">{{fi-name | \n limitTo: 25}}<\/b><\/span>\\\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\t\n {{fi-image}}\\\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-assets jFiler-row\">\\\n <ul class = \"list-inline pull-left\">\\\n <li>{{fi-progressBar}}<\/li>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\t\n <ul class = \"list-inline pull-right\">\\\n <li><a class = \"icon-jfi-trash\n jFiler-item-trash-action\"><\/a>\n <\/li>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\t\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\n <\/div>\\\n <\/div>\\\n <\/li>',\n\t\t\t\t\t\t\n itemAppend: '<li class = \"jFiler-item\">\\\n <div class = \"jFiler-item-container\">\\\n <div class = \"jFiler-item-inner\">\\\n\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-thumb\">\\\n <div class = \"jFiler-item-status\"><\/div>\\\n\t\t\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-info\">\\\n <span class = \"jFiler-item-title\">\n <b title = \"{{fi-name}}\">{{fi-name | \n limitTo: 25}}<\/b><\/span>\\\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\t\n {{fi-image}}\\\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\n <div class = \"jFiler-item-assets jFiler-row\">\\\n <ul class = \"list-inline pull-left\">\\\n <span class = \"jFiler-item-others\">\n {{fi-icon}} {{fi-size2}}<\/span>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\t\n <ul class = \"list-inline pull-right\">\\\n <li><a class = \"icon-jfi-trash\n jFiler-item-trash-action\"><\/a>\n <\/li>\\\n <\/ul>\\\n\t\t\t\t\t\t\t\t\t\t\n <\/div>\\\n\t\t\t\t\t\t\t\t\t\n <\/div>\\\n <\/div>\\\n <\/li>',\n\t\t\t\t\t\t\n progressBar: '<div class = \"bar\"><\/div>',\n itemAppendToEnd: false,\n removeConfirmation: false,\n\t\t\t\t\t\t\n _selectors: {\n list: '.jFiler-item-list',\n item: '.jFiler-item',\n progressBar: '.bar',\n remove: '.jFiler-item-trash-action',\n }\n\t\t\t\t\t\t\n },\n\t\t\t\t\t\n uploadFile: {\n url: \".\/php\/upload.php\",\n data: {},\n type: 'POST',\n enctype: 'multipart\/form-data',\n beforeSend: function(){},\n\t\t\t\t\t\t\n success: function(data, el){\n var parent = el.find(\".jFiler-jProgressBar\").parent();\n\t\t\t\t\t\t\t\n el.find(\".jFiler-jProgressBar\").fadeOut(\"slow\", function(){\n $(\"<div class = \\\"jFiler-item-others text-success\\\"\n ><i class = \\\"icon-jfi-check-circle\\\">\n <\/i> Success\n <\/div>\").hide().appendTo(parent).fadeIn(\"slow\"); \n });\n },\n\t\t\t\t\t\t\n error: function(el){\n var parent = el.find(\".jFiler-jProgressBar\").parent();\n\t\t\t\t\t\t\t\n el.find(\".jFiler-jProgressBar\").fadeOut(\"slow\", function(){\n $(\"<div class = \\\"jFiler-item-others text-error\\\"\n ><i class = \\\"icon-jfi-minus-circle\\\">\n <\/i> Error\n <\/div>\").hide().appendTo(parent).fadeIn(\"slow\"); \n });\n },\n\t\t\t\t\t\t\n statusCode: {},\n onProgress: function(){},\n },\n\t\t\t\t\t\n dragDrop: {\n dragEnter: function(){},\n dragLeave: function(){},\n drop: function(){},\n },\n\t\t\t\t\t\n addMore: true,\n clipBoardPaste: true,\n excludeName: null,\n beforeShow: function(){return true},\n onSelect: function(){},\n afterShow: function(){},\n onRemove: function(){},\n onEmpty: function(){},\n\t\t\t\t\t\n captions: {\n button: \"Choose Files\",\n feedback: \"Choose files To Upload\",\n feedback2: \"files were chosen\",\n drop: \"Drop file here to Upload\",\n removeConfirmation: \"Are you sure you want to remove this file?\",\n\t\t\t\t\t\t\n errors: {\n filesLimit: \"Only {{fi-limit}} files are allowed to be uploaded.\",\n filesType: \"Only Images are allowed to be uploaded.\",\n filesSize: \"{{fi-name}} is too large! \n Please upload file up to {{fi-maxSize}} MB.\",\n filesSizeAll: \"Files you've choosed are too large! \n Please upload files up to {{fi-maxSize}} MB.\"\n }\n }\n });\n });\n <\/script>\n \n <style>\n .file_input{\n display: inline-block;\n padding: 10px 16px;\n outline: none;\n cursor: pointer;\n\t\t\t\t\n text-decoration: none;\n text-align: center;\n white-space: nowrap;\n\t\t\t\t\n font-family: sans-serif;\n font-size: 11px;\n font-weight: bold;\n\t\t\t\t\n border-radius: 3px;\n color: #008BFF;\n border: 1px solid #008BFF;\n vertical-align: middle;\n background-color: #fff;\n margin-bottom: 10px;\n\t\t\t\t\n box-shadow: 0px 1px 5px rgba(0,0,0,0.05);\n -webkit-transition: all 0.2s;\n -moz-transition: all 0.2s;\n transition: all 0.2s;\n }\n\t\t\t\n .file_input:hover,\n\t\t \n .file_input:active {\n background: #008BFF;\n color: #fff;\n }\n\t\t\t\n <\/style>\n \n <!--[if IE]>\n <script src = \"https:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js\"\n >\n <\/script>\n <![endif]-->\n <\/head>\n\n <body>\n <div>\n <form action = \".\/php\/upload.php\" method = \"post\"\n enctype = \"multipart\/form-data\">\n\t\t\t\n <!-- filer 1 -->\n <input type = \"file\" multiple = \"multiple\" \n name = \"files[]\" id = \"input1\">\n \n <br>\n <input type = \"submit\">\n <\/form>\n <\/div>\n \n <br>\n <hr>\n <br>\n \n <div>\n <form action = \".\/php\/upload.php\" method = \"post\"\n enctype = \"multipart\/form-data\">\n\t\t\t\t\n <!-- filer 2 -->\n <a class = \"file_input\" data-jfiler-name = \"files\"\n data-jfiler-extensions = \"jpg, jpeg, png, gif\">\n <i class = \"icon-jfi-paperclip\"><\/i> \n Attach a file<\/a>\n \n <br>\n <input type = \"submit\">\n <\/form>\n <\/div>\n \n <br>\n <hr>\n <br>\n \n <div style = \"background: #f7f8fa;padding: 50px;\">\n <!-- filer 3 -->\n <input type = \"file\" multiple = \"multiple\" \n name = \"files[]\" id = \"input2\">\n \n <\/div>\n \n <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"Filer.js \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d jQuery \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 filer.js, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435 \u2014 <html xmlns […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[154],"tags":[],"class_list":["post-4884","page","type-page","status-publish","hentry","category-jquery"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/pages\/4884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/comments?post=4884"}],"version-history":[{"count":0,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/pages\/4884\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/media?parent=4884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/categories?post=4884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bearloga.space\/en\/wp-json\/wp\/v2\/tags?post=4884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}