{"id":1615,"date":"2024-08-02T10:37:50","date_gmt":"2024-08-02T08:37:50","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1615"},"modified":"2024-08-02T10:37:51","modified_gmt":"2024-08-02T08:37:51","slug":"002-uploader-con-ajax-2","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/17-ejercicios-con-ajax\/002-uploader-con-ajax-2\/","title":{"rendered":"002. Uploader con Ajax (2)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En el cap\u00edtulo anterior vimos como subir al servidor con la ayuda de <strong>AJAX<\/strong> ficheros. Hicimos la funci\u00f3n en <strong>Javascript<\/strong> que nos permite desencadenar la conexi\u00f3n al archivo PHP, esta funci\u00f3n se llamaba <strong><em>uploader()<\/em><\/strong>, y posteriormente hicimos el c\u00f3digo PHP que permite subir el archivo y devolver una respuesta que posteriormente formate\u00e1bamos a c\u00f3digo <strong>JSON<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">En este cap\u00edtulo vamos a a\u00f1adir una barra de progreso a nuestro archivo, para lo cual, HTML dispone de una etiqueta denominada <strong><em>&lt;progress&gt;&lt;\/progress&gt;<\/em><\/strong>, la cual recibe dos atributos, <strong><em>value<\/em><\/strong>, que es el valor actual y <strong><em>max<\/em><\/strong>, que define la m\u00e1xima anchura que va a recibir la barra de progreso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dependiendo del navegador en el que estemos, esta barra de progreso puede variar el dise\u00f1o, ya que cada navegador lo maneja de manera nativa, como ocurre con los reproductores de audio y video.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta barra de progreso la vamos a crear din\u00e1micamente por cada archivo que se suba, y cuando ya se haya terminado de cargar el archivo, dejaremos unos segundos y va a desaparecer dicha barra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a necesitar una funci\u00f3n que vaya trabajando toda la parte del progreso, funci\u00f3n que llamaremos <strong><em>progressUpload()<\/em><\/strong> en nuestro archivos <em>uploader.html<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos la sintaxis de <em>uploader.html<\/em>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Uploader con AJAX&lt;\/title&gt;\n&nbsp; &nbsp; &lt;style&gt;\n&nbsp; &nbsp; &nbsp; html {\n&nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;\n&nbsp; &nbsp; &nbsp; &nbsp; font-family: sans-serif;\n&nbsp; &nbsp; &nbsp; &nbsp; font-size: 16px;\n&nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; *,\n&nbsp; &nbsp; &nbsp; *::after,\n&nbsp; &nbsp; &nbsp; *::before {\n&nbsp; &nbsp; &nbsp; &nbsp; box-sizing: inherit;\n&nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; main {\n&nbsp; &nbsp; &nbsp; &nbsp; display: flex;\n&nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;\n&nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;\n&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;\n&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;\n&nbsp; &nbsp; &nbsp; &nbsp; min-height: 100vh;\n&nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; progress {\n&nbsp; &nbsp; &nbsp; &nbsp; margin-top: 1rem;\n&nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &lt;\/style&gt;\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;main&gt;\n&nbsp; &nbsp; &nbsp; &lt;input type=\"file\" name=\"files\" id=\"files\" multiple \/&gt;\n&nbsp; &nbsp; &lt;\/main&gt;\n\n&nbsp; &nbsp; &lt;script&gt;\n&nbsp; &nbsp; &nbsp; const d = document,\n&nbsp; &nbsp; &nbsp; &nbsp; $main = d.querySelector(\"main\"),\n&nbsp; &nbsp; &nbsp; &nbsp; $files = d.getElementById(\"files\");\n\n&nbsp; &nbsp; &nbsp; \/\/ Creamos funci\u00f3n que mediante AJAX permita subir la carga de archivos\n&nbsp; &nbsp; &nbsp; \/\/ Esta funci\u00f3n se ejecutar\u00e1 por cada archivo que reciba el input\n\n&nbsp; &nbsp; &nbsp; const uploader = (file) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; const xhr = new XMLHttpRequest(),\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formData = new FormData();\n\n&nbsp; &nbsp; &nbsp; &nbsp; formData.append(\"file\", file);\n\n&nbsp; &nbsp; &nbsp; &nbsp; xhr.addEventListener(\"readystatechange\", (e) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (xhr.readyState !== 4) return;\n\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let json = JSON.parse(xhr.responseText);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(json);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let message = xhr.statusText || \"Ocurri\u00f3 un error\";\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(`Error ${xhr.status}: ${message}`);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; &nbsp; });\n\n&nbsp; &nbsp; &nbsp; &nbsp; xhr.open(\"POST\", \"uploader.php\");\n&nbsp; &nbsp; &nbsp; &nbsp; xhr.setRequestHeader(\"enc-type\", \"multipart\/form-data\");\n&nbsp; &nbsp; &nbsp; &nbsp; xhr.send(formData);\n&nbsp; &nbsp; &nbsp; };\n\n&nbsp; &nbsp; &nbsp; const progressUpload = (file) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; const $progress = d.createElement(\"progress\"),\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $span = d.createElement(\"span\");\n&nbsp; &nbsp; &nbsp; &nbsp; $progress.value = 0;\n&nbsp; &nbsp; &nbsp; &nbsp; $progress.max = 100;\n\n&nbsp; &nbsp; &nbsp; &nbsp; $main.insertAdjacentElement(\"beforeend\", $progress);\n&nbsp; &nbsp; &nbsp; &nbsp; $main.insertAdjacentElement(\"beforeend\", $span);\n\n&nbsp; &nbsp; &nbsp; &nbsp; const fileReader = new FileReader();\n\n&nbsp; &nbsp; &nbsp; &nbsp; fileReader.readAsDataURL(file);\n\n&nbsp; &nbsp; &nbsp; &nbsp; fileReader.addEventListener(\"progress\", (e) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let progress = parseInt((e.loaded * 100) \/ e.total);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $progress.value = progress;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $span.innerHTML = `&lt;b&gt;${file.name} - ${progress}%&lt;\/b&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; });\n\n&nbsp; &nbsp; &nbsp; &nbsp; fileReader.addEventListener(\"loadend\", (e) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uploader(file);\n\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $main.removeChild($progress);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $main.removeChild($span);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $files.value = \"\";\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 3000);\n&nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; };\n\n&nbsp; &nbsp; &nbsp; d.addEventListener(\"change\", (e) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; if (e.target === $files) {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const files = Array.from(e.target.files);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; files.forEach((el) =&gt; progressUpload(el));\n&nbsp; &nbsp; &nbsp; &nbsp; }\n&nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &lt;\/script&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dejamos todos los ficheros del ejercicios en formato ZIP.<\/p>\n\n\n\n<div class=\"wp-block-file alignleft\"><a id=\"wp-block-file--media-b850bfe7-33e7-4dc6-bab6-c56375085e04\" href=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Uploader.zip\">Uploader<\/a><a href=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Uploader.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-b850bfe7-33e7-4dc6-bab6-c56375085e04\">Descarga<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>En el cap\u00edtulo anterior vimos como subir al servidor con la ayuda de AJAX ficheros. Hicimos la funci\u00f3n en Javascript que nos&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1609,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1615","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En el cap\u00edtulo anterior vimos como subir al servidor con la ayuda de AJAX ficheros. Hicimos la funci\u00f3n en Javascript que nos...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1615"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1615\/revisions"}],"predecessor-version":[{"id":1618,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1615\/revisions\/1618"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1609"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}