{"id":14515,"date":"2024-01-05T10:51:08","date_gmt":"2024-01-05T07:21:08","guid":{"rendered":"https:\/\/rasanegar.com\/blog\/%d8%a2%d9%be%d9%84%d9%88%d8%af-%d9%81%d8%a7%db%8c%d9%84-%d8%a8%d8%a7-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88%d8%a7%d9%86%db%8c%d9%84%db%8c-%d9%88-%d8%a8%d8%a7%d8%b1\/"},"modified":"2024-01-05T10:51:08","modified_gmt":"2024-01-05T07:21:08","slug":"%d8%a2%d9%be%d9%84%d9%88%d8%af-%d9%81%d8%a7%db%8c%d9%84-%d8%a8%d8%a7-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88%d8%a7%d9%86%db%8c%d9%84%db%8c-%d9%88-%d8%a8%d8%a7%d8%b1","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%a2%d9%be%d9%84%d9%88%d8%af-%d9%81%d8%a7%db%8c%d9%84-%d8%a8%d8%a7-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88%d8%a7%d9%86%db%8c%d9%84%db%8c-%d9%88-%d8%a8%d8%a7%d8%b1\/","title":{"rendered":"\u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u0627\u0646\u06cc\u0644\u06cc \u0648 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0641\u0631\u0627\u06af\u06cc\u0631 \u0627\u0633\u062a \u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u0645\u0646\u0627\u0628\u0639 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a (\u0631\u0648\u06cc \u06cc\u06a9 \u0645\u0631\u0648\u0631\u06af\u0631) \u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u0627\u0633\u062a\u0631\u0633 \u0632\u0627 \u0628\u0627\u0634\u062f.  \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647 \u060c \u0628\u0627 HTML 5 \u060c \u0639\u0646\u0627\u0635\u0631 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0641\u0631\u0645 \u0647\u0645\u0631\u0627\u0647 \u0647\u0633\u062a\u0646\u062f \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u0646\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0686\u0646\u06cc\u0646 \u0634\u0648\u0646\u062f &#8230;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a2%d9%be%d9%84%d9%88%d8%af-%d9%81%d8%a7%db%8c%d9%84-%d8%a8%d8%a7-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88%d8%a7%d9%86%db%8c%d9%84%db%8c-%d9%88-%d8%a8%d8%a7%d8%b1\/#%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_%d9%be%d8%b1%d9%88%da%98%d9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a2%d9%be%d9%84%d9%88%d8%af-%d9%81%d8%a7%db%8c%d9%84-%d8%a8%d8%a7-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88%d8%a7%d9%86%db%8c%d9%84%db%8c-%d9%88-%d8%a8%d8%a7%d8%b1\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%a2%d9%be%d9%84%d9%88%d8%af-%d9%81%d8%a7%db%8c%d9%84-%d8%a8%d8%a7-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa-%d9%88%d8%a7%d9%86%db%8c%d9%84%db%8c-%d9%88-%d8%a8%d8%a7%d8%b1\/#%d9%85%d9%86%d8%a7%d8%a8%d8%b9_%d9%85%d8%b1%d8%a8%d9%88%d8%b7%d9%87\" >\u0645\u0646\u0627\u0628\u0639 \u0645\u0631\u0628\u0648\u0637\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div class=\"content\"><noscript><\/p>\n<style>.lazyload-placeholder { display: none;  }<\/style>\n<p><\/noscript><\/p>\n<p>\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0647\u0645\u0647 \u062c\u0627 \u0627\u0633\u062a \u0648 \u0648\u0642\u062a\u06cc \u0646\u0648\u0628\u062a \u0628\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0648 \u0645\u0646\u0627\u0628\u0639 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0645\u06cc \u0631\u0633\u062f (\u0631\u0648\u06cc \u06cc\u06a9 \u0645\u0631\u0648\u0631\u06af\u0631) \u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u0627\u0633\u062a\u0631\u0633 \u0632\u0627 \u0628\u0627\u0634\u062f.  \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647\u060c \u0628\u0627 HTML 5\u060c \u0639\u0646\u0627\u0635\u0631 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0641\u0631\u0645 \u0647\u0645\u0631\u0627\u0647 \u0647\u0633\u062a\u0646\u062f \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u0646\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0633\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0646\u0627\u0628\u0639 \u0622\u067e\u0644\u0648\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u0646\u062f.<\/p>\n<blockquote>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u060c \u0645\u0627 \u0628\u0647 \u0631\u0648\u0634 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u0646\u06cc\u0644 JavaScript \u0646\u06af\u0627\u0647\u06cc \u062f\u0642\u06cc\u0642 \u062a\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a.  \u0647\u062f\u0641 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06cc\u0627\u062f \u062f\u0647\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062e\u0627\u0631\u062c\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0627\u0635\u0644\u06cc \u0631\u0627 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u06cc\u062f.  \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0648\u0636\u0639\u06cc\u062a \u067e\u06cc\u0634\u0631\u0641\u062a \u06cc\u06a9 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f.<\/p>\n<\/blockquote>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645\u060c \u0645\u0631\u062f\u0645!<\/p>\n<h2 id=\"projectsetup\"><span class=\"ez-toc-section\" id=\"%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_%d9%be%d8%b1%d9%88%da%98%d9%87\"><\/span>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0648\u0644 \u0648 \u0645\u0647\u0645\u062a\u0631 \u0627\u0632 \u0647\u0645\u0647 \u060c \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">$<\/span><span class=\"bash\"> mkdir file-upload-progress-bar-javascript<\/span>\n<\/code><\/pre>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0627\u06a9\u0646\u0648\u0646 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>index.html<\/code>\u060c <code>main.css<\/code>\u060c \u0648 <code>app.js<\/code> \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062a\u0645\u0627\u0645 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u0645.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">$<\/span><span class=\"bash\"> touch index.html &amp;&amp; touch main.css &amp;&amp; touch app.js<\/span>\n<\/code><\/pre>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0627\u0648\u0644\u06cc\u0647 HTML \u0634\u0631\u0648\u0639 \u0628\u0647 \u0633\u0627\u062e\u062a \u0633\u0627\u062e\u062a\u0627\u0631 \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u0645 <code>&lt;head&gt;<\/code> \u0648 <code>&lt;body&gt;<\/code> \u0628\u0631\u0686\u0633\u0628 \u0647\u0627:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"X-UA-Compatible\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"IE=edge\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>File Upload with Progress Bar using JavaScript<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0627\u0633\u062a\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>main.css<\/code>:<\/p>\n<pre><code class=\"hljs\">* {\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0638\u0627\u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u0645\u0627\u0646\u060c \u0627\u0632 \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0639\u0627\u0644\u06cc \u0641\u0648\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u06a9\u062f \u06a9\u06cc\u062a \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0639\u0627\u0644\u06cc \u0641\u0648\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c <code>index.html<\/code> \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f \u0648 <code>main.css<\/code> \u0641\u0627\u06cc\u0644 \u0644\u06cc\u0646\u06a9 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"X-UA-Compatible\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"IE=edge\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\n      <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/kit.fontawesome.com\/355573397a.js\"<\/span>\n      <span class=\"hljs-attr\">crossorigin<\/span>=<span class=\"hljs-string\">\"anonymous\"<\/span>\n    &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"main.css\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>File Upload with Progress Bar using JavaScript<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0645\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u0646\u062f\u0647 \u0641\u0627\u06cc\u0644 \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u062f\u0647\u06cc\u0645:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"X-UA-Compatible\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"IE=edge\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\n      <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/kit.fontawesome.com\/355573397a.js\"<\/span>\n      <span class=\"hljs-attr\">crossorigin<\/span>=<span class=\"hljs-string\">\"anonymous\"<\/span>\n    &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"main.css\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>File Upload with Progress Bar using JavaScript<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"file-upload__wrapper\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span>&gt;<\/span>File Uploader JavaScript with Progress<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-parent\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"file-upload__form\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"file-input\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">hidden<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-cloud-upload-alt\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Browse File to Upload<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"progress-container\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"uploaded-container\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"app.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p>\u0633\u067e\u0633 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u067e\u06cc\/\u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f <code>main.css<\/code><\/p>\n<pre><code class=\"hljs\">* {\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n<span class=\"hljs-selector-tag\">body<\/span> {\n  <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#cb67e9<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">font-family<\/span>: Arial, Helvetica, sans-serif;\n}\n<span class=\"hljs-selector-pseudo\">::selection<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: white;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#cb67e9<\/span>;\n}\n<span class=\"hljs-selector-class\">.file-upload__wrapper<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">640px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">35px<\/span>;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.05<\/span>);\n}\n<span class=\"hljs-selector-class\">.file-upload__wrapper<\/span> <span class=\"hljs-selector-tag\">header<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#cb67e9<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n}\n<span class=\"hljs-selector-class\">.form-parent<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  gap: <span class=\"hljs-number\">30px<\/span>;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n}\n<span class=\"hljs-selector-class\">.file-upload__wrapper<\/span> <span class=\"hljs-selector-tag\">form<\/span><span class=\"hljs-selector-class\">.file-upload__form<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">150px<\/span>;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> dashed <span class=\"hljs-number\">#cb67e9<\/span>;\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">justify-content<\/span>: center;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}\n<span class=\"hljs-selector-tag\">form<\/span><span class=\"hljs-selector-class\">.file-upload__form<\/span> <span class=\"hljs-selector-pseudo\">:where<\/span>(<span class=\"hljs-selector-tag\">i<\/span>, <span class=\"hljs-selector-tag\">p<\/span>) {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#cb67e9<\/span>;\n}\n<span class=\"hljs-selector-tag\">form<\/span><span class=\"hljs-selector-class\">.file-upload__form<\/span> <span class=\"hljs-selector-tag\">i<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">50px<\/span>;\n}\n<span class=\"hljs-selector-tag\">form<\/span><span class=\"hljs-selector-class\">.file-upload__form<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n  <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">15px<\/span>;\n}\n<span class=\"hljs-selector-tag\">section<\/span> <span class=\"hljs-selector-class\">.row<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e9f0ff<\/span>;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n  <span class=\"hljs-attribute\">list-style<\/span>: none;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n}\n<span class=\"hljs-selector-tag\">section<\/span> <span class=\"hljs-selector-class\">.row<\/span> <span class=\"hljs-selector-tag\">i<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#cb67e9<\/span>;\n}\n<span class=\"hljs-selector-tag\">section<\/span> <span class=\"hljs-selector-class\">.details<\/span> <span class=\"hljs-selector-tag\">span<\/span> {\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n}\n<span class=\"hljs-selector-class\">.progress-container<\/span> <span class=\"hljs-selector-class\">.row<\/span> <span class=\"hljs-selector-class\">.content-wrapper<\/span> {\n  <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">15px<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n<span class=\"hljs-selector-class\">.progress-container<\/span> <span class=\"hljs-selector-class\">.details<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">7px<\/span>;\n}\n<span class=\"hljs-selector-class\">.progress-container<\/span> <span class=\"hljs-selector-class\">.content<\/span> <span class=\"hljs-selector-class\">.progress-bar-wrapper<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">10px<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">5px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">30px<\/span>;\n}\n<span class=\"hljs-selector-class\">.content<\/span> <span class=\"hljs-selector-class\">.progress-bar<\/span> <span class=\"hljs-selector-class\">.progress-wrapper<\/span> {\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#cb67e9<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">0%<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n}\n<span class=\"hljs-selector-class\">.uploaded-container<\/span> {\n  <span class=\"hljs-attribute\">overflow-y<\/span>: scroll;\n  <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">230px<\/span>;\n}\n<span class=\"hljs-selector-class\">.uploaded-container<\/span><span class=\"hljs-selector-class\">.onprogress<\/span> {\n  <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">160px<\/span>;\n}\n<span class=\"hljs-selector-class\">.uploaded-container<\/span> <span class=\"hljs-selector-class\">.row<\/span> <span class=\"hljs-selector-class\">.content-wrapper<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">align-items<\/span>: center;\n}\n<span class=\"hljs-selector-class\">.uploaded-container<\/span> <span class=\"hljs-selector-class\">.row<\/span> <span class=\"hljs-selector-class\">.details-wrapper<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: flex;\n  <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n  <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">15px<\/span>;\n}\n<span class=\"hljs-selector-class\">.uploaded-container<\/span> <span class=\"hljs-selector-class\">.row<\/span> <span class=\"hljs-selector-class\">.details-wrapper<\/span> <span class=\"hljs-selector-class\">.name<\/span> <span class=\"hljs-selector-tag\">span<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: green;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}\n<span class=\"hljs-selector-class\">.uploaded-container<\/span> <span class=\"hljs-selector-class\">.row<\/span> <span class=\"hljs-selector-class\">.details-wrapper<\/span> <span class=\"hljs-selector-class\">.file-size<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#404040<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">11px<\/span>;\n}\n<\/code><\/pre>\n<p>\u062d\u0627\u0644\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0627\u0633\u062a \u0631\u0648\u06cc \u0645\u0631\u0648\u0631\u06af\u0631:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/upload-file-with-progress-bar-using-javascript-1.png\" alt=\"\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f\u060c \u0627\u06a9\u0646\u0648\u0646 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>app.js<\/code> \u0641\u0627\u06cc\u0644\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u062d\u06cc\u0627\u062a \u0645\u06cc \u0628\u062e\u0634\u062f.<\/p>\n<p>\u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u06a9\u067e\u06cc\/\u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f <code>app.js<\/code>:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">const<\/span> uploadForm = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\".file-upload__form\"<\/span>);\n<span class=\"hljs-keyword\">const<\/span> myInput = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\".file-input\"<\/span>);\n<span class=\"hljs-keyword\">const<\/span> progressContainer = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\".progress-container\"<\/span>);\n<span class=\"hljs-keyword\">const<\/span> uploadedContainer = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">\".uploaded-container\"<\/span>);\nuploadForm.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\">() =&gt;<\/span> {\n  myInput.click();\n});\nmyInput.onchange = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ target }<\/span>) =&gt;<\/span> {\n  <span class=\"hljs-keyword\">let<\/span> file = target.files(<span class=\"hljs-number\">0<\/span>);\n  <span class=\"hljs-keyword\">if<\/span> (file) {\n    <span class=\"hljs-keyword\">let<\/span> fileName = file.name;\n    <span class=\"hljs-keyword\">if<\/span> (fileName.length &gt;= <span class=\"hljs-number\">12<\/span>) {\n      <span class=\"hljs-keyword\">let<\/span> splitName = fileName.split(<span class=\"hljs-string\">\".\"<\/span>);\n      fileName = splitName(<span class=\"hljs-number\">0<\/span>).substring(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">13<\/span>) + <span class=\"hljs-string\">\"... .\"<\/span> + splitName(<span class=\"hljs-number\">1<\/span>);\n    }\n    uploadFile(fileName);\n  }\n};\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">uploadFile<\/span>(<span class=\"hljs-params\">name<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">let<\/span> xhrRequest = <span class=\"hljs-keyword\">new<\/span> XMLHttpRequest();\n  <span class=\"hljs-keyword\">const<\/span> endpoint = <span class=\"hljs-string\">\"uploadFile.php\"<\/span>;\n  xhrRequest.open(<span class=\"hljs-string\">\"POST\"<\/span>, endpoint);\n  xhrRequest.upload.addEventListener(<span class=\"hljs-string\">\"progress\"<\/span>, <span class=\"hljs-function\">(<span class=\"hljs-params\">{ loaded, total }<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">let<\/span> fileLoaded = <span class=\"hljs-built_in\">Math<\/span>.floor((loaded \/ total) * <span class=\"hljs-number\">100<\/span>);\n    <span class=\"hljs-keyword\">let<\/span> fileTotal = <span class=\"hljs-built_in\">Math<\/span>.floor(total \/ <span class=\"hljs-number\">1000<\/span>);\n    <span class=\"hljs-keyword\">let<\/span> fileSize;\n    fileTotal &lt; <span class=\"hljs-number\">1024<\/span>\n      ? (fileSize = fileTotal + <span class=\"hljs-string\">\" KB\"<\/span>)\n      : (fileSize = (loaded \/ (<span class=\"hljs-number\">1024<\/span> * <span class=\"hljs-number\">1024<\/span>)).toFixed(<span class=\"hljs-number\">2<\/span>) + <span class=\"hljs-string\">\" MB\"<\/span>);\n    <span class=\"hljs-keyword\">let<\/span> progressMarkup = <span class=\"hljs-string\">`&lt;li class=\"row\"&gt;\n                          &lt;i class=\"fas fa-file-alt\"&gt;&lt;\/i&gt;\n                          &lt;div class=\"content-wrapper\"&gt;\n                            &lt;div class=\"details-wrapper\"&gt;\n                              &lt;span class=\"name\"&gt;<span class=\"hljs-subst\">${name}<\/span> | &lt;span&gt;Uploading&lt;\/span&gt;&lt;\/span&gt;\n                              &lt;span class=\"percent\"&gt;<span class=\"hljs-subst\">${fileLoaded}<\/span>%&lt;\/span&gt;\n                            &lt;\/div&gt;\n                            &lt;div class=\"progress-bar-wrapper\"&gt;\n                              &lt;div class=\"progress-wrapper\" style=\"width: <span class=\"hljs-subst\">${fileLoaded}<\/span>%\"&gt;&lt;\/div&gt;\n                            &lt;\/div&gt;\n                          &lt;\/div&gt;\n                        &lt;\/li&gt;`<\/span>;\n    uploadedContainer.classList.add(<span class=\"hljs-string\">\"onprogress\"<\/span>);\n    progressContainer.innerHTML = progressMarkup;\n    <span class=\"hljs-keyword\">if<\/span> (loaded == total) {\n      progressContainer.innerHTML = <span class=\"hljs-string\">\"\"<\/span>;\n      <span class=\"hljs-keyword\">let<\/span> uploadedMarkup = <span class=\"hljs-string\">`&lt;li class=\"row\"&gt;\n                            &lt;div class=\"content-wrapper upload\"&gt;\n                              &lt;i class=\"fas fa-file-alt\"&gt;&lt;\/i&gt;\n                              &lt;div class=\"details-wrapper\"&gt;\n                                &lt;span class=\"name\"&gt;<span class=\"hljs-subst\">${name}<\/span> | &lt;span&gt;Uploaded&lt;\/span&gt;&lt;\/span&gt;\n                                &lt;span class=\"file-size\"&gt;<span class=\"hljs-subst\">${fileSize}<\/span>&lt;\/span&gt;\n                              &lt;\/div&gt;\n                            &lt;\/div&gt;\n                          &lt;\/li&gt;`<\/span>;\n      uploadedContainer.classList.remove(<span class=\"hljs-string\">\"onprogress\"<\/span>);\n      uploadedContainer.insertAdjacentHTML(<span class=\"hljs-string\">\"afterbegin\"<\/span>, uploadedMarkup);\n    }\n  });\n  <span class=\"hljs-keyword\">let<\/span> data = <span class=\"hljs-keyword\">new<\/span> FormData(uploadForm);\n  xhrRequest.send(data);\n}\n<\/code><\/pre>\n<p>\u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0641\u0627\u06cc\u0644\u06cc \u0631\u0627 \u06a9\u0647 \u0627\u0632 \u0639\u0646\u0635\u0631 \u0648\u0631\u0648\u062f\u06cc \u0641\u0627\u06cc\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a \u0628\u062e\u0648\u0627\u0646\u06cc\u0645 \u0648 \u0644\u06cc\u0633\u062a \u062c\u062f\u06cc\u062f\u06cc \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0631\u0648\u06cc DOM.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0641\u0627\u06cc\u0644 \u062f\u0631 \u062d\u0627\u0644 \u0622\u067e\u0644\u0648\u062f \u0627\u0633\u062a\u060c \u0633\u0637\u062d \u067e\u06cc\u0634\u0631\u0641\u062a \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644\u060c \u0648\u0636\u0639\u06cc\u062a \u067e\u06cc\u0634\u0631\u0641\u062a \u0628\u0647 \u0622\u067e\u0644\u0648\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0633\u067e\u0633 \u06cc\u06a9 \u0639\u062f\u062f \u0631\u0627 \u0646\u06cc\u0632 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>uploadFile.php<\/code> \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0628\u0631\u0627\u06cc \u062a\u0645\u0633\u062e\u0631 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0641\u0627\u06cc\u0644 \u0647\u0627.  \u062f\u0644\u06cc\u0644 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646\u06cc \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u062b\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u0631\u0627 \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u0645.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;?php<\/span>\n  <span class=\"hljs-variable\">$file_name<\/span> =  <span class=\"hljs-variable\">$_FILES<\/span>(<span class=\"hljs-string\">'file'<\/span>)(<span class=\"hljs-string\">'name'<\/span>);\n  <span class=\"hljs-variable\">$tmp_name<\/span> = <span class=\"hljs-variable\">$_FILES<\/span>(<span class=\"hljs-string\">'file'<\/span>)(<span class=\"hljs-string\">'tmp_name'<\/span>);\n  <span class=\"hljs-variable\">$file_up_name<\/span> = time().<span class=\"hljs-variable\">$file_name<\/span>;\n  move_uploaded_file(<span class=\"hljs-variable\">$tmp_name<\/span>, <span class=\"hljs-string\">\"files\/\"<\/span>.<span class=\"hljs-variable\">$file_up_name<\/span>);\n<span class=\"hljs-meta\">?&gt;<\/span>\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/rasanegar.com\/blog\/wp-content\/uploads\/2024\/01\/upload-file-with-progress-bar-using-javascript-2.png\" alt=\"\" title=\"\"><\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\"><\/span>\u0646\u062a\u06cc\u062c\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0646\u0642\u0637\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u0628\u0648\u062f\u0647 \u0627\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0628\u0633\u0627\u0632\u06cc\u0645 \u0648 \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0632\u0645\u0627\u0646\u06cc \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0645\u06cc \u0633\u0627\u0632\u06cc\u062f \u0648 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u0627\u062d\u0633\u0627\u0633 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u062f\u0631\u06af\u06cc\u0631 \u0647\u0633\u062a\u0646\u062f \u0648 \u062f\u0631\u06a9 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0686\u0642\u062f\u0631 \u06a9\u0646\u062f \u06cc\u0627 \u0633\u0631\u06cc\u0639 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u0645\u0627\u06cc\u0644 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0645\u062c\u062f\u062f\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u062f\u0631 \u062d\u06cc\u0646 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u06af\u06cc\u0631 \u06a9\u0631\u062f\u06cc\u062f\u060c \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc GitHub \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0627\u0632 \u0633\u0627\u06cc\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u06cc\u0627 \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 dm \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0628\u0647 <a target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"https:\/\/github.com\/UcheAzubuko\/file-upload-progress-bar-javascript\">\u0645\u062e\u0632\u0646 GitHub \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647<\/a>.<\/p>\n<h2 id=\"relevantresources\"><span class=\"ez-toc-section\" id=\"%d9%85%d9%86%d8%a7%d8%a8%d8%b9_%d9%85%d8%b1%d8%a8%d9%88%d8%b7%d9%87\"><\/span>\u0645\u0646\u0627\u0628\u0639 \u0645\u0631\u0628\u0648\u0637\u0647<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/fontawesome.com\/docs\/web\/use-with\/vue\/\">FontAwesome Docs<\/a><\/li>\n<\/ul>\n<\/div>\n<p>    (\u0628\u0631\u0686\u0633\u0628 \u0647\u0627 \u0628\u0631\u0627\u06cc \u062a\u0631\u062c\u0645\u0647)# html<br \/>\n<br \/><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-01-05 10:51:03<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;14515&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648\u0627\u0646\u06cc\u0644\u06cc \u0648 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0641\u0627\u06cc\u0644 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0641\u0631\u0627\u06af\u06cc\u0631 \u0627\u0633\u062a \u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u067e\u0644\u0648\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648 \u0645\u0646\u0627\u0628\u0639 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a (\u0631\u0648\u06cc \u06cc\u06a9 \u0645\u0631\u0648\u0631\u06af\u0631) \u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u0627\u0633\u062a\u0631\u0633 \u0632\u0627 \u0628\u0627\u0634\u062f.  \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647 \u060c \u0628\u0627 HTML 5 \u060c \u0639\u0646\u0627\u0635\u0631 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0641\u0631\u0645 \u0647\u0645\u0631\u0627\u0647 \u0647\u0633\u062a\u0646\u062f \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u0646\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0686\u0646\u06cc\u0646 \u0634\u0648\u0646\u062f ...&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0628\u0633\u06cc\u0627\u0631 \u0647\u0645\u0647 \u062c\u0627 \u0627\u0633\u062a \u0648 \u0648\u0642\u062a\u06cc \u0646\u0648\u0628\u062a \u0628\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0648 \u0645\u0646\u0627\u0628\u0639 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u0645\u06cc \u0631\u0633\u062f (\u0631\u0648\u06cc \u06cc\u06a9 \u0645\u0631\u0648\u0631\u06af\u0631) \u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u0627\u0633\u062a\u0631\u0633 \u0632\u0627 \u0628\u0627\u0634\u062f. \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647\u060c \u0628\u0627 HTML 5\u060c \u0639\u0646\u0627\u0635\u0631 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0641\u0631\u0645 \u0647\u0645\u0631\u0627\u0647 \u0647\u0633\u062a\u0646\u062f \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u0646\u062f [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":14516,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1772,620],"tags":[],"class_list":["post-14515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/14515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=14515"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/14515\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media\/14516"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=14515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=14515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=14515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}