initial commit

1 files changed, 372 insertions, 0 deletions

diff --git a/files/es/web/api/file/using_files_from_web_applications/index.html b/files/es/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..5aceed9d6a
--- /dev/null
+++ b/files/es/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,372 @@
+---
+title: Utilizar ficheros desde aplicaciones web
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - Basura
+  - Ficheros
+  - HTML5
+  - HacerNavegadorAgnóstico
+  - Intermedio
+  - NecesitaActualizar
+  - Subir
+  - ajax actualización
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p> </p>
+
+<p>El uso de la API File añadida al DOM en HTML5, ahora hace posible que la página web solicite al usuario que seleccione archivos locales y, a continuación, leer el contenido de esos archivos.  Esta selección se puede hacer, ya sea usando un elemento {{HTMLElement ( "input")}} de HTML o mediante arrastrar y soltar.</p>
+
+<h2 id="Selección_de_ficheros_utilizando_HTML">Selección de ficheros utilizando HTML</h2>
+
+<p>Seleccionar solo un fichero usando la API File es sencillo:</p>
+
+<pre><code>&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>Cuando el usuario elige el fichero, la función <code>handleFiles()</code> es llamada con un objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList </code></a>el cual a su vez contiene un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> que representa el fichero elegido por el usuario.</p>
+
+<p>Si se prefiere permitir al usuario elegir varios ficheros, entonces se pone el atributo <code>multiple </code>en el elemento <code>input:</code></p>
+
+<pre><code>&lt;input type="file" id="input" multiple="true" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>En este caso, la lista de ficheros pasada a la función <code>handleFiles() </code>contiene un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File </code></a>por cada fichero seleccionado por el usuario. </p>
+
+<p>{{ h2_gecko_minversion("Using hidden file input elements using the click() method", "2.0") }}</p>
+
+<p>Comenzando en Gecko 2.0 {{ geckoRelease("2.0") }}, se puede ocultar el realmente feo {{ HTMLElement("input") }} y representar tu propio interfaz para abrir el picker de ficheros y pintar que fichero o ficheros ha seleccionado el usuario. Esto se puede hacer añadiendo al elemento input la característica "display:none" en su css, o estilo y llamando al método <code>click() </code>del elemento {{ HTMLElement("input") }}.</p>
+
+<p>Como aparece en este HTML:</p>
+
+<pre class="deki-transform">&lt;form&gt;
+  &lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;/form&gt;
+
+&lt;a href="javascript:doClick()"&gt;Select some files&lt;/a&gt;
+</pre>
+
+<p>Tu método <code>doClick()</code> puede parecerse al siguiente:</p>
+
+<pre class="deki-transform">function doClick() {
+  var el = document.getElementById("fileElem");
+  if (el) {
+    el.click();
+  }
+}
+</pre>
+
+<p>Obviamente puedes cambiar como quieras, el estilo del botón para abrir el picker de ficheros.</p>
+
+<h3 id="Añadir_dinámicamente_un_listener_tipo_change">Añadir dinámicamente un listener tipo change</h3>
+
+<p>Si tu campo input ha sido creado usando una libreria JavaScript como <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>, se necesitará usar {{ domxref("element.addEventListener()") }} para añadir el manejador de eventos tipo change, como en el ejemplo siguiente:</p>
+
+<pre class="deki-transform">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+</pre>
+
+<p>Nota: en este caso, la función <code>handleFiles() </code>mira la lista de ficheros con la finalidad de aceptar un parametro, mientras los eventos listeners sean añadidos de esta manera no pueden aceptar un parametro del input.</p>
+
+<p>{{ h1_gecko_minversion("Using blob URLs", "2.0") }}</p>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduce soporte para los métodos de DOM {{ domxref("window.createBlobURL()") }} y {{ domxref("window.revokeBlobURL()") }}. El cual te permite crear un simple string con la URL que referenciar cualquier dato que pueda referenciar usando un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> DOM, esto incluye los ficheros locales del usuario del dispositivo.</p>
+
+<p>Cuando tienes un objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a> te gusta poder referenciarlo con una URL desde el HTML, la manera de crear tu propio blob URL para poder hacer esto es la siguiente:</p>
+
+<pre>var blobURL = window.createBlobURL(fileObj);
+</pre>
+
+<p>El blob URL es un string que identifica el objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a>. Cada vez que se llama a {{ domxref("window.createBlobURL()") }}, un único blob URL se crea. Cada vez que esto pasa debe de ser liberado. Cuando el documento se cierra, se libera automáticamente, pero si tu página lo usa dinámicamente deberás liberarlos explicitamente llamando a {{ domxref("window.revokeBlobURL()") }}:</p>
+
+<pre>window.revokeBlobURL(blobURL);
+</pre>
+
+<h2 id="Selección_de_ficheros_usando_drag_and_drop">Selección de ficheros usando drag and drop</h2>
+
+<p>También se puede dejar al usuario arrastrar los ficheros en tu aplicación web.</p>
+
+<p>El primer paso para establecer la zona de arrastre, el lugar en donde dejar los ficheros arrastrados. La parte exacta en donde se coloque esta zona de arrastre dentro de tu aplicación, dependerá del diseño de la aplicación, pero crear el elemento es sencillo:</p>
+
+<pre class="deki-transform">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>En este ejemplo se transforma el elemento de ID "dropbox" en la zona de arrastre. Esto se hace añadiendo listeners para lo eventos de <code>dragenter</code>, <code>dragover</code>, y <code>drop</code>.</p>
+
+<p>Realmente en este caso no se necesita hacer nada con los eventos <code>dragenter</code> y <code>dragover</code>, por lo que ambas funciones seran muy sencillas. Sólo pararán la propagacion de eventos y prevendran las acciones por defecto:</p>
+
+<pre class="deki-transform">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>La verdadera magia ocurre en la función <code>drop()</code>:</p>
+
+<pre class="deki-transform">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Aquí se recupera el campo <code>dataTransfer</code> del evento, a partir de ahi se extraen la lista de ficheros, y se pasan a <code>handleFiles()</code>. A partir de este punto se manejan los ficheros de igual manera tanto si se han obtenido usado el elemento <code>input</code> o drag and drop.</p>
+
+<h2 id="Recuperando_la_información_de_los_ficheros_selecionados">Recuperando la información de los ficheros selecionados</h2>
+
+<p>El objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> es dado por el DOM y lista todos los ficheros selecionados por el usuario, cada uno es un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a>. Para determinar el número de ficheros que han sido seleccionados se comprueba la longitud de la lista con el atributo <code>length</code>:</p>
+
+<pre>var numFiles = files.length;
+</pre>
+
+<p>Al objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> se accede de manera sencilla, accediendo a la lista como si fuera un array:</p>
+
+<pre class="deki-transform">for (var i = 0; i &lt; files.length; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>El bucle itera por todos los ficheros de la lista.</p>
+
+<p>Cada objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> tiene tres atributos que contienen información util sobre el fichero.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Es de solo lectura y es el nombre del fichero sin ninguna información sobre el path.</dd>
+ <dt><code>size</code></dt>
+ <dd>Es de solo lectura y es el tamaño del fichero en bytes como un entero de 64-bit.</dd>
+ <dt><code>type</code></dt>
+ <dd>Es de solo lectura y contiene MIME type del fichero, o "" si el tipo no puede ser determinado.</dd>
+</dl>
+
+<h2 id="Ejemplo_Mostrando_miniaturas_de_una_selección_de_imágenes_del_usuario">Ejemplo: Mostrando miniaturas de una selección de imágenes del usuario</h2>
+
+<p>Digamos que usted esta desarrollando el próximo gran sitio web para compartir fotos, y quiere usar HTML5 para mostrar previsualizaciones de miniaturas de imágenes antes de que el usuario actual las suba. Basta con establecer su elemento input o zona de arrastre como se indicó anteriormente, y hacer una llamada a una función <code>handleFiles()</code> como la siguiente.</p>
+
+<pre class="deki-transform">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Aquí nuestro bucle recorre los archivos seleccionados por el usuario y mira el atributo <code>type</code> de cada archivo para ver si es una imagen (haciendo que una expresión regular coincida con la cadena de texto "image.*"). Para cada archivo que sea una imagen, creamos un nuevo elemento <code>img</code>. Se puede usar CSS para establecer bordes bonitos, sombras, y especificar el tamaño de la imagen, el de manera que ni siquiera necesita hacerse aquí.</p>
+
+<p>Cada imagen tiene la clase CSS "obj" añadida, para hacerla mas fácil buscarla en el árbol del DOM. Además añadimos un atributo<code> file</code> a cada imagen especificando el <a href="/en/DOM/File" title="en/DOM/File"><code>Fichero</code></a> para la imagen; esto nos permitira traer el hecho de subir las imágenes más tarde. Finalmente, usamos {{ domxref("Node.appendChild()") }} para añadir la nueva miniatura en el área de la previsualización de nuestro documento.</p>
+
+<p>A continuación establecemos el <a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a> para controlar la carga de la imagen de forma asíncrona y enlazarla con el elemento <code>img</code>. Después de crear el nuevo objeto <code>FileReader</code>, configuramos su función <code>onload</code>, luego llamamos a <code>readAsDataURL()</code> para comenzar la operación de lectura en segundo plano. Cuando el contenido completo de la imagen ha sido cargado, se convierte a  <code>data:</code> URL, el cuál es pasado al callback <code>onload</code>. Nuestra implementación de esta rutina simplemente establece el atributo <code>src</code> del elemento <code>img</code> cargado, cuyo resultado es la imagen apareciendo en la miniatura en la pantalla del usuario.</p>
+
+<p>{{ h1_gecko_minversion("Example: Using blob URLs to display images", "2.0") }}</p>
+
+<p>Este ejemplo el objeto blob URLs para mostrar las miniaturas de las imágenes. Además, se muestra otra información del archivo incluyendo sus nombres y tamaños. Tú puedes <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">ver el ejemplo</a> (tenga en cuenta que se requiere una versión <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">Nghtly</a> de Firefox del 23 de september 23 o mas reciente, o Firefox 4.0 beta 7).</p>
+
+<p>El HTML que representa la interfaz es::</p>
+
+<pre class="deki-transform">&lt;form&gt;
+  &lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;/form&gt;
+&lt;a href="javascript:doClick()"&gt;Seleccione algunos archivos&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;¡No se han seleccionado archivos!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Esto establece nuestro elemento {{ HTMLElement("input") }} de nuestro, así como un enlace que invoca el selector de archivos, ya que mantenmos el input file oculto para prevenir mostrar un UI menos atractivo. Esto se explica anteriormente en al la sección {{ anch("Using hidden file input elements using the click() method") }}, así como el método <code>doClick()</code> que invoca el el selector de archivos.</p>
+
+<p>El método <code>handleFiles()</code> es el siguiente:</p>
+
+<pre class="deki-transform">function handleFiles(files) {
+  var d = document.getElementById("fileList");
+  if (!files.length) {
+    d.innerHTML = "&lt;p&gt;¡No se han seleccionado archivos!&lt;/p&gt;";
+  } else {
+    var list = document.createElement("ul");
+    d.appendChild(list);
+    for (var i=0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.createBlobURL(files[i]);;
+      img.height = 60;
+      img.onload = function() {
+        window.revokeBlobURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>Esto comienza buscando la URL del {{ HTMLElement("div") }} con la ID "fileList". Este es el bloque donde vamos a insertar la lista de archivos incluyendo las miniaturas.</p>
+
+<p>Si el objeto {{ domxref("FileList") }} pasado a <code>handleFiles()</code> es <code>null</code>, simplemente establecemos el bloque inner HTML para mostrar "¡No se han seleccionado archivos!". En caso contrario, comenzamos a construir nuestra lista de archivos como sigue:</p>
+
+<ol>
+ <li>Un nuevo elemento de lista desordenada ({{ HTMLElement("ul") }} es creado.</li>
+ <li>El nuevo elemento de la lista es insertado en el bloque {{ HTMLElement("div") }} llamando a si método {{ domxref("element.appendChild()") }}.</li>
+ <li>Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado <code>files</code>:
+  <ol>
+   <li>Se crea un nuevo elemento de lista ({{ HTMLElement("li") }}) y lo inserta en la lista.</li>
+   <li>Se crea un nuevo elemento imagen ({{ HTMLElement("img") }}).</li>
+   <li>Establece en la fuente de la imagen un nuevo blob URL representandoel archivo, usando {{ domxref("window.createBlobURL()") }} para crear el blob URL.</li>
+   <li>Se establece el alto de la imagen en 60 pixels.</li>
+   <li>Se configura el controlador para el evento load para liberar el blob URL, puesto que ya no es necesario una vez que la imagen ha sido cargada. Esto se hace llamando al método {{ domxref("window.revokeBlobURL()") }}, pasando la cadena en el blob URL como se ha especificado para <code>img.src</code>.</li>
+   <li>Se añade el nuevo elemento de la lista a la lista.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Ejemplo_Subiendo_un_archivo_seleccionado_por_el_usuario">Ejemplo: Subiendo un archivo seleccionado por el usuario</h2>
+
+<p>Otra cosa que podrías querer hacer es dejar que el usuario suba el archivo o los archivos seleccionados (como las imagenes seleccionadas usando el ejemplo anterior) al servidor. Esto se puede hacer de forma asíncrona muy facilmente.</p>
+
+<h3 id="Creando_las_tareas_de_subida">Creando las tareas de subida</h3>
+
+<p>Continuando con el código que contruye las miniaturas en el ejemplo anterior, hay que recordar que cada imagen en miniatura se encuentra en la clase CSS "obj", con el correspondiente <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> adjunto en un attributo <code>file</code>. Vamos a seleccionar todas las imágenes que el usuario ha seleccionado facilmente para subirlas usando {{ domxref("Document.querySelectorAll()") }}, como sigue:</p>
+
+<pre class="deki-transform">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>La segunda línea crea un array, llamado<code> imgs</code>, de todos los elementos  en el documento con la clase CSS "obj". En nuestro caso, estos serán todas las miniaturas de las imágenes. Una vez que tenemos esa lista,    of all the elements in the document with the CSS class "obj". In our case, these will be all the image thumbnails. Once we have that list, es trivial pasar por la lista, creando una nueva instancia de <code>FileUpload</code> por cada una. Subiendo el correspondiente archivo por cada uno de ellos.</p>
+
+<h3 id="Manipulando_el_proceso_de_carga_de_un_archivo">Manipulando el proceso de carga de un archivo</h3>
+
+<p>La función <code>FileUpload</code> acepta dos entradas: un elemento de imagen y un archivo desde el que leer los datos de la imagen.</p>
+
+<pre class="deki-transform">function FileUpload(img, file) {
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  xhr.sendAsBinary(file.getAsBinary());
+}
+</pre>
+
+<p>La función <code>FileUpload()</code> mostrada arriba crea un throbber, el cual es usado para mostrar la información del progreso, a continuación se crea un <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> para manejar la subida de los datos.</p>
+
+<p>Antes de subir los datos de hecho, se toman varias medidas preparatorias:</p>
+
+<ol>
+ <li>El listener del progreso de la carga del <code>XMLHttpRequest</code>'s se configura para actualizar el throbber con una nueva información de porcentaje, por lo que a medida que progresa la carga, el throbber será actualizado en base a la última información.</li>
+ <li>El evento "load" de la carga del <code>XMLHttpRequest</code>'s se configura para actualizar el throbber con el 100% como la información de progreso (para asegurar que el indicador de progreso realmente alcanza el 100%, en caso de las <span class="short_text" id="result_box" lang="es"><span class="hps">peculiaridades</span> <span class="hps">de granularidad durante el proceso</span></span>). Entoces se elimina el throbber, puesto que ya no es necesario. Esto causa que el throbber desaparezca una vez la carga está completa.</li>
+ <li>La petición para cargar la imagen se inicia llamando al método <code>XMLHttpRequest</code>'s <code>open()</code> para comenzar a generar una petición de tipo POST.</li>
+ <li>El MIME type para la carga se establece llamando a la función <code>deXMLHttpRequest</code> <code>overrideMimeType()</code>. En este caso, estamos usando un MIME type genérico; usted puede o no puede necesitar establecer MIME type en absoluto, dependiendo de su necesidad.</li>
+ <li>Finalmente, se llama a la función <code>sendAsBinary()</code> del <code>XMLHttpRequest</code> es llamada para subir el contenido del archivo. <em>TEsto es necesario ser revisado, actualmete se está usando la rutina sincronizada en desuso getAsBinary() para extraer los datos del archivo..</em></li>
+</ol>
+
+<h3 id="Manipulación_del_proceso_de_carga_para_un_archivo_de_forma_asíncrona">Manipulación del proceso de carga para un archivo, de forma asíncrona</h3>
+
+<pre class="deki-transform">function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name;
+  var fileSize = file.size;
+  var fileData = file.getAsBinary(); // works on TEXT data ONLY.
+
+  var boundary = "xxxxxxxxx";
+  var uri = "serverLogic.php";
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+</pre>
+
+<p><em>Esto necesita ser modificado para funcionar con datos binarios también.</em></p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><code><a href="/en/DOM/File" title="en/DOM/File">File</a></code></li>
+ <li><code><a href="/en/DOM/FileList" title="en/DOM/FileList">FileList</a></code></li>
+ <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li>
+ <li><a href="/En/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>