{"id":284235,"date":"2017-03-31T12:00:02","date_gmt":"2017-03-31T08:00:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=284235"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=284235","title":{"rendered":"\u041a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b \u0441 \u0444\u0430\u0439\u043b\u043e\u043c \u0438\u043b\u0438 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u0449\u0438\u043a \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u043e\u0441\u043b\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 IE"},"content":{"rendered":"<p><b><i>\u0417\u0430\u0434\u0430\u0447\u0430:<\/i><\/b> \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e FormData \u0438 FileReader \u0432 \u0444\u043e\u0440\u043c\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u043a\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u044b (\u043a\u0440\u043e\u043c\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439) \u0432 \u043e\u0431\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<p>  <b><i>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430:<\/i><\/b> \u0432\u0441\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, IE 10+.<\/p>\n<p>  <b><i>\u041f\u043b\u0430\u0433\u0438\u043d\u044b:<\/i><\/b> jquery-2.1.4<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0f1\/2d1\/755\/0f12d1755f49014358a62dba89ee534b.jpg\" alt=\"image\"\/><br \/>   <a name=\"habracut\"><\/a><br \/>   <b>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043a\u043e\u0435 FormData<\/b><\/p>\n<p>  <i>Formdata<\/i> \u2014 \u0442\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 XHR2, \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u0440 \u043a\u043b\u044e\u0447 \/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<br \/>  <i>new Formdata ()<\/i> \u2014 \u044d\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 FormData.<\/p>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/FormData\/FormData\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e FormData<\/a><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/2e2\/db8\/50a\/2e2db850a874fb02792a7b0d24d7a4f5.png\" alt=\"image\"\/><\/p>\n<p>  FormData \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0435\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a:<\/p>\n<ul>\n<li>.get() \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u043b\u044e\u0447\u0443;<\/li>\n<li>.getAll() \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441 \u044d\u0442\u0438\u043c \u043a\u043b\u044e\u0447\u043e\u043c;<\/li>\n<li>.has() \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0431\u0443\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430;<\/li>\n<li>.set() \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u043a\u043b\u044e\u0447\u0443 \u0438, \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043d\u0435\u0442, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0435\u0433\u043e;<\/li>\n<li>.append() \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u0440\u0443 \u043a\u043b\u044e\u0447 \/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435;<\/li>\n<li>.delete() \u2014 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e \u043a\u043b\u044e\u0447\u0443;<\/li>\n<li>.forEach() \u2014 \u043d\u0430 \u043d\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435: <br \/>  \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 FormData \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u0435\u0441\u044c\u043c\u0430 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432\u0441\u0442\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441: \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435? \u041d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0439\u0434\u0435\u043d\u043e \u043d\u0435 \u0431\u044b\u043b\u043e, \u0437\u0430\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0431\u044b\u043b \u043d\u0430\u0439\u0434\u0435\u043d forEach(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f \u2014 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430. <\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a\u0436\u0435 FormData \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0446\u0438\u043a\u043b\u0430 for&#8230;of (\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 ECMAScript 6, \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b).<\/p>\n<p>  \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 FormData \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 Internet explorer (\u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430), \u0430 \u0432\u0435\u0440\u043d\u0435\u0435, \u0432 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435. \u0418\u0437 \u0432\u0441\u0435\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 FormData, Internet explorer \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e append(), \u0447\u0442\u043e \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u0435\u0442 \u0432\u0441\u044e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043d\u0435\u0439, \u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e: <\/p>\n<ul>\n<li> \u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b \u0447\u0435\u0440\u0435\u0437 serializeArray(), \u043f\u0435\u0440\u0435\u0431\u0435\u0440\u0435\u043c, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0438\u0445 \u043d\u0430 \u043f\u0443\u0441\u0442\u043e\u0442\u0443 \u0438, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c (data-title), \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 (type=\u201dhidden\u201d), \u0437\u0430\u043d\u0435\u0441\u0435\u043c \u0432 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u044b. <\/li>\n<li> \u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c append() \u0432 FormData.<\/li>\n<\/ul>\n<p>  \u0424\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u0438 \u0437\u0430\u043a\u0430\u0447\u043a\u0435 \u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u043c\u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u044f\u043c\u0438 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0442\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u0441 \u0442\u0435\u043c\u0438, \u0447\u0442\u043e \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 input type=\u201dfile\u201d \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435, \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>  <b>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 FileReader<br \/>  <\/b><br \/>  FileReader \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 (\u0438\u043b\u0438 \u0431\u0443\u0444\u0435\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445), \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b File \u0438\u043b\u0438 Blob, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u0438\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f.<\/p>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/FileReader\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e filereader<\/a><\/p>\n<p>  \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043a \u0441\u0430\u043c\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435<br \/>  \u0424\u043e\u0440\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0442\u044c:<\/p>\n<pre><code class=\"html\">&lt;form enctype=&quot;multipart\/form-data&quot; id=&quot;form&quot;&gt;         &lt;!-- \u0422\u0435\u043c\u0430 \u043f\u0438\u0441\u044c\u043c\u0430 (\u0441\u043b\u0443\u0436\u0435\u0431\u043d\u043e\u0435 \u043f\u043e\u043b\u0435)--&gt;         &lt;input type=&quot;hidden&quot; name=&quot;thm&quot; data-title=&quot;\u0422\u0435\u043c\u0430&quot; value=&quot;\u0417\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0430\u043d\u043a\u0435\u0442\u0443&quot;&gt;         &lt;div class=&quot;radio-list&quot;&gt;             &lt;div class=&quot;radio&quot;&gt;                 &lt;input type=&quot;radio&quot; name=&quot;radiobtn&quot; value=&quot;\u041f\u0435\u0440\u0432\u044b\u0439&quot; data-title=&quot;\u0412\u044b\u0431\u043e\u0440 \u043f\u0443\u043d\u043a\u0442\u043e\u0432&quot; id=&quot;radio1&quot; class=&quot;radio__input&quot; checked&gt;                 &lt;label for=&quot;radio1&quot; class=&quot;radio__label&quot;&gt;\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0443\u043d\u043a\u0442&lt;\/label&gt;             &lt;\/div&gt;             &lt;div class=&quot;radio&quot;&gt;                 &lt;input type=&quot;radio&quot; name=&quot;radiobtn&quot; value=&quot;\u0412\u0442\u043e\u0440\u043e\u0439&quot; data-title=&quot;\u0412\u044b\u0431\u043e\u0440 \u043f\u0443\u043d\u043a\u0442\u043e\u0432&quot; id=&quot;radio2&quot; class=&quot;radio__input&quot;&gt;                 &lt;label for=&quot;radio2&quot; class=&quot;radio__label&quot;&gt;\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0443\u043d\u043a\u0442&lt;\/label&gt;             &lt;\/div&gt;         &lt;\/div&gt;         &lt;div class=&quot;checkbox-list&quot;&gt;             &lt;div class=&quot;checkbox&quot;&gt;                 &lt;input type=&quot;checkbox&quot; name=&quot;checkboxbtn&quot; value=&quot;\u041f\u0435\u0440\u0432\u044b\u0439&quot; data-title=&quot;\u0412\u044b\u0431\u043e\u0440 \u043f\u0443\u043d\u043a\u0442\u043e\u04322&quot; id=&quot;checkbox1&quot; class=&quot;checkbox__input&quot; checked&gt;                 &lt;label for=&quot;checkbox1&quot; class=&quot;checkbox__label&quot;&gt;\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0443\u043d\u043a\u0442&lt;\/label&gt;             &lt;\/div&gt;             &lt;div class=&quot;checkbox&quot;&gt;                 &lt;input type=&quot;checkbox&quot; name=&quot;checkboxbtn&quot; value=&quot;\u0412\u0442\u043e\u0440\u043e\u0439&quot; data-title=&quot;\u0412\u044b\u0431\u043e\u0440 \u043f\u0443\u043d\u043a\u0442\u043e\u04322&quot; id=&quot;checkbox2&quot; class=&quot;checkbox__input&quot;&gt;                 &lt;label for=&quot;checkbox2&quot; class=&quot;checkbox__label&quot;&gt;\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0443\u043d\u043a\u0442&lt;\/label&gt;             &lt;\/div&gt;         &lt;\/div&gt;         &lt;input type=&quot;text&quot; name=&quot;name&quot; data-title=&quot;\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435&quot; class=&quot;input-text&quot;&gt;         &lt;textarea name=&quot;textarea&quot; data-title=&quot;\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435&quot; class=&quot;textarea&quot;&gt;&lt;\/textarea&gt;         &lt;!-- input \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u0430  --&gt;         &lt;input class=&quot;input-file js_file_check&quot; type=&quot;file&quot; name=&quot;file[]&quot; data-title=&quot;\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442&quot; multiple=&quot;&quot; accept=&quot;image&quot;&gt;         &lt;!--\u0421\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c--&gt;         &lt;ul class=&quot;js_file_list file-list&quot;&gt;         &lt;\/ul&gt;         &lt;!-- \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b--&gt;         &lt;button class=&quot;js_btn_submit&quot;&gt;\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b&lt;\/button&gt;     &lt;\/form&gt;<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0444\u0430\u0439\u043b\u043e\u0432. \u0421 \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u0443\u043a\u0430\u0436\u0435\u043c \u0432 \u043f\u043e\u043b\u0435 name \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 file[] \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 multiple, \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 accept=\u00abimage\u00bb.<br \/>  \u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438 \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u044b\u043c progress bar-\u043e\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439. \u0418 \u0442\u0443\u0442 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e fileList (\u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432) \u0443 \u043d\u0430\u0448\u0435\u0433\u043e input \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0444\u0430\u0439\u043b \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0441 \u0442\u0435\u043c \u0447\u0442\u043e \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e. \u0418 \u043f\u0440\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0438 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 FormData.<\/p>\n<p>  <b><i>1) \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0430\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 ajax:<\/i><\/b><\/p>\n<pre><code class=\"javascript\">var form = form; \/\/\u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0444\u043e\u0440\u043c\u0430      function formSend(formObject, form) {         $.ajax({             type: &quot;POST&quot;,             url: 'form-handler.php',             dataType: 'json',             contentType: false,             processData: false,             data: formObject,             success: function() {                 $(form).trigger('reset');  \/\/\u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0432 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435                 alert('Success');             }         });     };<\/code><\/pre>\n<p>  <b><i>2) \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0431\u043e\u0440\u043a\u0438 \u0444\u043e\u0440\u043c\u044b:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> function formData_assembly(form) {         var formSendAll = new FormData(), \/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 FormData             form_arr = $(form).find(':input,select,textarea').serializeArray(), \/\/\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0444\u043e\u0440\u043c\u044b \u0431\u0435\u0437 \u0444\u0430\u0439\u043b\u043e\u0432             formdata = {}; \/\/\u0430\u0441\u0441\u0430\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0444\u043e\u0440\u043c\u044b          for (var i = 0; i &lt; form_arr.length; i++) {             if (form_arr[i].value.length &gt; 0) { \/\/\u043f\u0435\u0440\u0435\u0431\u0435\u0440\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c                 var current_input = $(form).find('input[name=' +                          form_arr[i].name +                          '],select[name=' +                          form_arr[i].name +                          '],textarea[name=' +                          form_arr[i].name + ']'),                     value_arr = {}; \/\/ \u043d\u043e\u0432\u044b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f + \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a                 var title = $(current_input).attr('data-title'); \/\/\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e\u043b\u044f                 if ($(current_input).attr('type') != 'hidden') { \/\/\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043f\u043e\u043b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u043c                     value_arr['value'] = form_arr[i].value;                     value_arr['title'] = title;                     formdata[form_arr[i].name] = value_arr;                 } else {                     formSendAll.append(form_arr[i].name, form_arr[i].value); \/\/\u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u043e\u0431\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u044b                 }             }         }         formdata = JSON.stringify(formdata);         formSendAll.append('formData', formdata); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0432 formdata          \/\/ file         if ($(form).find('input[type=file]').hasClass('js_file_check')) { \/\/\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0435\u0441\u0442\u044c \u043b\u0438 input type file \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u043a\u0438             var current_input = $(form).find('input[type=file]');             if ($(current_input).val().length &gt; 0) { \/\/\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u044c                 $('.js_file_list li').each(function() {                     var list_file_name = $(this).find('span').text();                     for (var k = 0; k &lt; $(current_input)[0].files.length; k++) {                         if (list_file_name == $(current_input)[0].files[k].name) { \/\/\u0441\u0432\u0435\u0440\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438                             formSendAll.append($(current_input).attr('name'), $(current_input)[0].files[k]); \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435                         }                     }                 })             }         }         formSend(formSendAll, form);     }     formData_assembly(form); <\/code><\/pre>\n<p>  <b><i>3) \u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> function submit_function(form){...} <\/code><\/pre>\n<p>  <b><i>4) \u0412\u0435\u0448\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> $('.js_btn_submit').click(function (e) { \te.preventDefault(); \tvar current_form = $(this).closest('form');\/\/\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \tsubmit_function(current_form); }) <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u0449\u0438\u043a \u0444\u043e\u0440\u043c\u044b, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>  <b><i>1) \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f input type=file:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> function checkFile(){ \tvar inputs = document.getElementsByClassName('js_file_check'); \tfor (var i = 0; i &lt; inputs.length; i++) {   \tinputs[i].addEventListener('change', handleFileSelect, false); \t} } checkFile(); <\/code><\/pre>\n<p>  <b><i>2) \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0448\u0438\u0431\u043e\u043a:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> var reader;  function abortRead() {     reader.abort(); }  function errorHandler(evt) {     switch (evt.target.error.code) {         case evt.target.error.NOT_FOUND_ERR:             alert('File Not Found!');             break;         case evt.target.error.NOT_READABLE_ERR:             alert('File is not readable');             break;         case evt.target.error.ABORT_ERR:             break; \/\/ noop         default:             alert('An error occurred reading this file.');     }; } <\/code><\/pre>\n<p>  <b><i>3) \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 fileList \u043d\u0430\u0448\u0435\u0433\u043e input type=file:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> function handleFileSelect(evt) {     var thisInput = $(this); \/\/input type file \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a     for (var i = 0; i &lt; thisInput[0].files.length; i++) { \/\/\u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e         reader_file(thisInput[0].files[i]); \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430     } } <\/code><\/pre>\n<p>  <b><i>4) \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> function reader_file(file) {     var reader = new FileReader(),         fileName = file.name;     reader.onerror = errorHandler; \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043e\u043a     $('.js_file_list').append('&lt;li&gt;&lt;span&gt;' +          fileName +          '&lt;\/span&gt;&lt;div class=&quot;js_file_remove file_remove&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;progress-bar js_progress_bar&quot;&gt;&lt;\/div&gt;&lt;\/li&gt;'); \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435     reader.onabort = function(e) {         alert('File read cancelled');     };     reader.onload = function(e) { \/\/\u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438         \/\/\u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0435\u043b\u0430\u0435\u043c     }     reader.onprogress = function(event) { \/\/ \u0432\u044b\u0432\u043e\u0434 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u043e\u0441\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438         if (event.lengthComputable) {             var percent = parseInt(((event.loaded \/ event.total) * 100), 10);             $('.js_progress_bar').css('width', percent + '%');         }     }     if (reader.readAsBinaryString === undefined) { \/\/ \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 readAsBinaryString         reader.readAsBinaryString = function(fileData) {             var binary = &quot;&quot;,                 pt = this,                 reader = new FileReader();             reader.onload = function(e) {                 var bytes = new Uint8Array(reader.result);                 var length = bytes.byteLength;                 for (var i = 0; i &lt; length; i++) {                     binary += String.fromCharCode(bytes[i]);                 }                 pt.content = binary;                 $(pt).trigger('onload');             }         }         reader.readAsArrayBuffer(file);     } else {         reader.readAsBinaryString(file);     } } <\/code><\/pre>\n<p>  <b><i>5) \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430:<\/i><\/b>  <\/p>\n<pre><code class=\"javascript\"> $(document).on('click', '.js_file_remove', function() {     var list_item = $(this).closest('li');     $(list_item).remove(); }); <\/code><\/pre>\n<p>  <b><i>6) \u041c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043e\u0442\u043f\u0440\u0430\u0432\u0449\u0438\u043a, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440:<\/i><\/b><\/p>\n<p>  <a href=\"https:\/\/bitbucket.org\/tutmee\/lecture-alex.git\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0435\u043c\u043e<\/a><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/325340\/\"> https:\/\/habrahabr.ru\/post\/325340\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><b><i>\u0417\u0430\u0434\u0430\u0447\u0430:<\/i><\/b> \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e FormData \u0438 FileReader \u0432 \u0444\u043e\u0440\u043c\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u043a\u043e\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u044b (\u043a\u0440\u043e\u043c\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439) \u0432 \u043e\u0431\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432.<\/p>\n<p>  <b><i>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430:<\/i><\/b> \u0432\u0441\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, IE 10+.<\/p>\n<p>  <b><i>\u041f\u043b\u0430\u0433\u0438\u043d\u044b:<\/i><\/b> jquery-2.1.4<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0f1\/2d1\/755\/0f12d1755f49014358a62dba89ee534b.jpg\" alt=\"image\"\/>   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-284235","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/284235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=284235"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/284235\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=284235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=284235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}