diff options
Diffstat (limited to 'files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html')
| -rw-r--r-- | files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html | 378 |
1 files changed, 0 insertions, 378 deletions
diff --git a/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html b/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html deleted file mode 100644 index 7130b99de3..0000000000 --- a/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html +++ /dev/null @@ -1,378 +0,0 @@ ---- -title: Usando archivos desde aplicaciones web -slug: orphaned/Usando_archivos_desde_aplicaciones_web -tags: - - Archivos - - HTML5 - - para_revisar - - páginas_a_traducir -original_slug: Usando_archivos_desde_aplicaciones_web ---- -<p>{{ gecko_minversion_header("1.9.2") }}</p> - -<p> </p> - -<p>Al usar la API de Archivos agregada al DOM en HTML5, ahora es posible que el contenido de una página web solicite al usuario que elija un archivo local para luego leer el contenido de esos archivos. Esta selección puede hacerse tanto usando un elemento <code class="western"><a href="/en/DOM/HTMLInputElement" title="en/DOM/HTMLInputElement">input</a></code> de HTML o arrastrando y soltando el archivo.</p> - -<h2 id="Seleccionar_archivos_usando_HTML"> Seleccionar archivos usando HTML</h2> - -<p> Seleccionar un solo archivo para usar con la API de archivo es simple:</p> - -<pre><code><input type="file" id="input" onchange="handleFiles(this.files)"></code> -</pre> - -<p>Cuando el usuario selecciona un archivo, se llama a la función <code>handleFiles()</code> con un objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> que contiene el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File </code></a>representando el archivo seleccionado por el usuario.</p> - -<p>Si desea permitir al usuario seleccionar varios archivos, simplemente use el atributo <code>multiple</code> en el elemento <code>input</code>:</p> - -<pre><code><input type="file" id="input" multiple="true" onchange="handleFiles(this.files)"></code> -</pre> - -<p>En este caso, la lista de archivos se pasa a la función <code>handleFiles()contiene </code><code>un objeto</code> <a href="/en/DOM/File" title="en/DOM/File"> <code>File</code></a> por cada archivo que el usuario ha seleccionado.</p> - -<p>{{ h2_gecko_minversion("Uso de elementos ocultos del archivo de entrada usando el método click() ", "2.0") }}</p> - -<p>Desde la versión 2.0 de Gecko {{ geckoRelease("2.0") }}, puedes esconder el elemento file {{ HTMLElement("input") }} y mostrar una interfaz propia para abrir el examinador de archivos y para mostrar que archivo o archivos ha seleccionado el usuario. Puedes hacerlo agregándole al estilo del elemento input la instrucción "display:none" y usando el método <code>click()</code> en el elemento {{ HTMLElement("input") }}.</p> - -<p>Considere este código HTML:</p> - -<pre class="deki-transform"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> -<a href="#" id="fileSelect">Select some files</a> -</pre> - -<p>Tu método <code>doClick()</code> puede verse como esto:</p> - -<pre class="deki-transform">var fileSelect = document.getElementById("fileSelect"), - fileElem = document.getElementById("fileElem"); - -fileSelect.addEventListener("click", function (e) { - if (fileElem) { - fileElem.click(); - } - e.preventDefault(); // prevent navigation to "#" -}, false); -</pre> - -<p>Obiamente puedes darle estilo al nuevo botón para abrir el selector de archivos como desees.</p> - -<h3 id="Dinámica_de_la_adición_de_un_detector_de_cambio">Dinámica de la adición de un detector de cambio</h3> - -<p> Si tu campo de entrada fue creado con una librería de JavaScript como <a class="external" href="http://www.jquery.com/">jQuery</a>, necesitarás usar {{ domxref("element.addEventListener()") }} para agregar un manejador de eventos de cambio, como este:</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 que en este caso, la función <code class="western">handleFiles()</code> busca la lista de archivos en lugar de aceptar un parámetro, ya que los detectores de eventos añadidos de esta manera no pueden aceptar un parámetro de entrada.</p> - -<p> </p> - -<p>{{ h1_gecko_minversion("Usando Objetos URL", "2.0") }}</p> - -<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduce asistencia para el DOM {{ domxref("window.URL.createObjectURL()") }} y los métodos {{ domxref("window.URL.revokeObjectURL()") }} Esto te permite crear URLs simples para ser usadas como referencia a cualquier dato que pueda ser referenciado usando un objeto DOM <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a>, incluyendo archivos locales en el computador del usuario.</p> - -<p>Cuando tienes un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> te gustaría hacer referencia por URL desde HTML, puedes crear un objeto URL para que quede así :</p> - -<pre>var objectURL = window.URL.createObjectURL(fileObj); -</pre> - -<p>El objeto URL es una cadena de caracteres que identifica el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> . Cada vez que invocas {{ domxref("window.URL.createObjectURL()") }}, un único objeto URL es creado, <span class="long_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener traducciones alternativas">incluso, si usted</span> ya <span class="hps" title="Haz clic para obtener traducciones alternativas">ha</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">creado</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">un</span><span class="hps" title="Haz clic para obtener traducciones alternativas"> objeto URL de</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">ese archivo</span></span>. Cada uno de estos debe ser liberado. Mientras se liberan automáticamente cuando se libera la memoria utilizada por el documento, sí tu página los usa dinámicamente, podrías liberarlos explicitamente invocando {{ domxref("window.URL.revokeObjectURL()") }}:</p> - -<pre>window.URL.revokeObjectURL(objectURL); -</pre> - -<h2 id="Selección_de_archivos_usando_arrastrar_y_soltar">Selección de archivos usando arrastrar y soltar</h2> - -<p> <span lang="es-ES">También puedes dejar que el usuario arrastre y suelte los archivos en la aplicación Web.</span></p> - -<p>El primer paso es establecer una zona para soltar. Exactamente que parte de tu contenido aceptara soltar puede variar dependiendo de el diseño de tu aplicación, pero hacer un elemento que reciba eventos de soltar es fácil:</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, estamos girando el elemento con el ID "dropbox" en nuestra zona para soltar. Esto se hace mediante la adicción de manejadores que escuchen los eventos <code class="western">dragenter</code>, <code class="western">dragover</code>, y <code class="western">drop</code>.</p> - -<p>En realidad no necesitamos hacer nada con los eventos <code class="western">dragenter</code> and <code class="western">dragover</code> en nuestro caso, por lo que estas funciones son a la vez simples. Acabar de detener la propagación del evento y evitar que la acción predeterminada ocurra:</p> - -<pre class="deki-transform">function dragenter(e) { - e.stopPropagation(); - e.preventDefault(); -} - -function dragover(e) { - e.stopPropagation(); - e.preventDefault(); -} -</pre> - -<p>La verdadera magia pasa en la función <code class="western">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í, recuperamos el campo <code>dataTransfer</code> del evento, a continuación tomamos la lista de archivos fuera de él, que pasa para <code>handleFiles()</code>. Desde este punto, el manejo de los archivos es el mismo si el usuario utiliza el elemento de entrada o arrastrar y soltar. Obteniendo información de los archivos seleccionados.</p> - -<p>El objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> proporcionado por el DOM de las listas de todos los archivos seleccionados por el usuario, cada una se especifica como un objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a>. Tu puedes determinar cuantos archivos el usuario selecciona, al verificar el valor del atributo <code>length</code>:</p> - -<pre>var numFiles = files.length; -</pre> - -<p>Individualmente los objetos <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> pueden ser recuperados simplemente accediendo a la lista como una matriz:</p> - -<pre class="deki-transform">for (var i = 0; i < files.length; i++) { - var file = files[i]; - .. -} -</pre> - -<p> Este bucle se repite en todos los archivos de la lista de archivos.</p> - -<p>Hay tres atributos proporcionados por el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> que contienen información útil sobre el archivo.</p> - -<dl> - <dt><code>name</code></dt> - <dd>El nombre de archivo como cadena de sólo lectura. Esto es sólo el nombre de el archivo y no incluye ninguna información de la ruta.</dd> - <dt><code>size</code></dt> - <dd>El tamaño del archivo en bytes como de solo lectura entero de 64 bits.</dd> - <dt><code>type</code></dt> - <dd>El tipo MIME de el archivo como una cadena de sólo lectura, o "" si el tipo no puede ser determinado.</dd> -</dl> - -<h2 id="Ejemplo_Mostrando_miniaturas_de_las_imágenes_seleccionadas_por_el_usuario">Ejemplo: Mostrando miniaturas de las imágenes seleccionadas por el usuario</h2> - -<p>Digamos que estás desarrollando el próximo gran sitio web para compartir fotos,y deseas usar HTML5 para mostrar vistas previas en miniaturas de las imágenes antes de que el usuario realmente suba los archivos. Simplemente basta con establecer el elemento de entrada o de soltar como se indicó anteriormente, y llamar una función, como la función <code>handleFiles()</code> de abajo.</p> - -<pre class="deki-transform">function handleFiles(files) { - for (var i = 0; i < 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 maneja los archivos seleccionados por el usuario buscando en cada tipo de atributo del archivo para ver si es un archivo imagen (Buscando coincidencias con la cadena de expresión regular "image.*"). Por cada archivo de tipo imagen, creamos un nuevo elemento img. El CSS puede ser usado para crear bordes, sombras y/o especificar el tamaño de la imagen, por lo cual no es necesario hacerlo aquí.</p> - -<p>Cada imagen tiene añadida la clase CSS "obj", para que sean fáciles de encontrar en el árbol DOM. También vamos a añadir un archivo atributo a cada imagen especificando el archivo de la imagen, o que nos permitirá buscar las imágenes para en realidad subirlas mas tarde. Por último se utilizamos {{ domxref("Node.appendChild()") }} para agregar la nueva miniatura para el área de previsualización de nuestro documento.</p> - -<p>A continuación, se establece <a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a> para manejar de forma asincrónica la carga de la imagen y lo conecta con el elemento img.Después se crea el nuevo objeto <code>FileReader</code>, hemos creado la función <code>load</code>, a continuación llamamos <code>readAsDataURL()</code> para empezar la operación de lectura de fondo. cuando todo el contenido del archivo de imagen se carga, se convierten en una <code>data:</code> URL, cada uno se pasa por <code>onload</code> callback. Nuestra implementación de esta rutina se limita a establecer el atributo src del elemento img de la imagen cargada, lo que resulta en la imagen que aparece en la miniatura en la pantalla del usuario.</p> - -<p>{{ h1_gecko_minversion("Ejemplo: Usar URL objeto para mostrar imágenes", "2.0") }}</p> - -<p>En este ejemplo se utiliza el objeto URL para mostrar miniaturas de las imágenes. Además, se muestra la información de otro archivo con su nonbre y tamaño. Tu puedes <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">ver el ejemplo vivo </a>(nota se requiere <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">versión nocturna (nightly build</a>) de Firefox del 22 de noviembre o posterior, o Firefox 4.0 beta 8).</p> - -<div class="note"><strong>Nota:</strong> Esta API existía en versiones beta de Firefox 4, pero cambio el 22 de noviembre, ¡así que asegúrate que estas en una versión actual!</div> - -<p>Escuchar<br> - traducción del inglés al español<br> - El código HTML que presenta la interfaz se parece a esto:</p> - -<pre class="deki-transform"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> -<a href="#" id="fileSelect">Select some files</a> -<div id="fileList"> - <p>¡No se han seleccionado archivos!</p> -</div> -</pre> - -<p>Este establece nuestro archivo {{ HTMLElement("input") }} elemento, así como un enlace que invoca el selector de archivos , ya que mantener la entrada de archivo oculto para para evitar que lo menos atractivo de la interfaz sea mostrado. Esto se explica más arriba en la sección {{ anch("Using hidden file input elements using the click() method") }}, como es el método <code>doClick()</code> que invoca el selector de archivos.</p> - -<p>El método siguiente <code>handleFiles()</code>:</p> - -<pre class="deki-transform">var fileSelect = document.getElementById("fileSelect"), - fileElem = document.getElementById("fileElem"), - fileList = document.getElementById("fileList"); - -fileSelect.addEventListener("click", function (e) { - if (fileElem) { - fileElem.click(); - } - e.preventDefault(); // evitar la navegación a "#" -}, false); - -function handleFiles(files) { - if (!files.length) { - fileList.innerHTML = "<p>¡No se han seleccionado archivos!</p>"; - } - else { - var list = document.createElement("ul"); - for (var i = 0; i < files.length; i++) { - var li = document.createElement("li"); - list.appendChild(li); - - var img = document.createElement("img"); - img.src = window.URL.createObjectURL(files[i]);; - img.height = 60; - img.onload = function () { - window.URL.revokeObjectURL(this.src); - } - li.appendChild(img); - - var info = document.createElement("span"); - info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; - li.appendChild(info); - } - fileList.appendChild(list); - } -} -</pre> - -<p>Esto comienza por ir a buscar el {{ HTMLElement("div") }} con el ID "fileList". Este es el bloque en el que vamos a insertar la lista de archivos, incluyendo vistas en miniaturas.</p> - -<p>Si el objeto {{ domxref("FileList") }} <code>handleFiles()</code> es <code>null</code>, se establece dentro del código HTML interno del bloque para que no aparezca "¡No se han seleccionado archivos!". De lo contrario, empezamos a contruir nuestra lista de archivos, de la siguiente manera:</p> - -<p>Una nueva lista desordenada elemento ({{ HTMLElement("ul") }} es creada.</p> - -<ol> - <li>La nueva lista de elementos se inserta en el bloque {{ HTMLElement("div") }} llamando a este método {{ domxref("element.appendChild()") }}.</li> - <li>Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado por <code>files</code>: - <ol> - <li>Crear un nuevo elemento de la lista ({{ HTMLElement("li") }}) y se inserta en la lista.</li> - <li>Crear un nuevo elemento imagen ({{ HTMLElement("img") }}).</li> - <li>Ajuste de la imagen de origen a un nuevo objeto URL representando el archivo, usando {{ domxref("window.URL.createObjectURL()") }} para crear la blob URL.</li> - <li>Ajuste la altura de la imagen a 60 píxeles.</li> - <li>Establecer el manejador de el evento de carga de imagen para liberar el objeto URL, Set up the image's load event handler to release the object URL, puesto que ya no se necesita una vez que la imagen se ha cargado. esto se hace llamando a el método {{ domxref("window.URL.revokeObjectURL()") }} , pasando en el objeto URL la cadena como lo especifica <code>img.src</code>.</li> - <li>Anexar el nuevo elemento lista a la lista.</li> - </ol> - </li> -</ol> - -<h2 id="Ejemplo_Cargando_archivos_seleccionado_por_el_usuario_(user-selected_file)">Ejemplo: Cargando archivos seleccionado por el usuario (user-selected file)</h2> - -<p>Otra cosa que tu podrías querer hacer es permitir al usuario cargar un archivo o archivos seleccionados (por ejemplo, las imagenes seleccionadas con el ejemplo previo) a un servidor. Esto puede hacerse asincrónicamente muy facil.</p> - -<h3 id="Creando_las_tareas_de_carga">Creando las tareas de carga</h3> - -<p>Continuando con el código que genera las imágenes en miniatura en el ejemplo anterior, recordemos que cada imagen en la clase CSS "obj", con el correspondiente <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> adjunto en el atributo de el archivo. Esto nos permite fácilmente seleccionar todas las imagenes que el usuario ha escogido para ser cargadas con {{ domxref("Document.querySelectorAll()") }}, así:</p> - -<pre class="deki-transform">function sendFiles() { - var imgs = document.querySelectorAll(".obj"); - - for (var i = 0; i < imgs.length; i++) { - new FileUpload(imgs[i], imgs[i].file); - } -} -</pre> - -<p>En la linea 2 se crea una matriz, llamada <code>imgs</code>, de todos los elemtos in el documento con la clase CSS "obj". en nuestro caso, estas serán todas las miniaturas de las imágenes.Una vez que obtenemos esa lista, es trivial pasar por la lista, creando una nueva instancia <code>FileUpload</code> para cada uno. Cada uno de estos manejadores de carga el archivo correspondiente.</p> - -<h3 id="Manejadores_de_procesos_de_carga_de_un_archivo">Manejadores de procesos de carga de un archivo</h3> - -<p>La función <code>FileUpload</code> acepta dos entradas: un elemento imagen y un archivo desde donde se leerán 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> muestra arriba crear un throbber, cada uno es usado para mostrar la información de progreso, a continuación se crea un <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> para manejar la carga de los datos.</p> - -<p>Antes de transferir los datos actualmente, varios pasos preparatorios se tienen:</p> - -<ol> - <li>El <code>XMLHttpRequest</code>'s upload "progress" listener esta configurado para actualizar la información Throbber con nuevo porcentaje, de modo que a medida que avanza la carga, el Throbber sera actualizado basado en la ultima información.</li> - <li>El <code>XMLHttpRequest</code>'s upload "load" manejador de evento esta configurado para actualizar como un 100% como la información de progreso (para garantizar que el indicador de progreso realmente alcanza el 100%, en caso de peculiaridades y granulidades durante el proceso). A continuación se elimina el thobber, puesto que este no es necesario. Esto hace que el Thobber desaparezca una vez que la carga esta completa.</li> - <li>La solicitud de carga de imagen se abre llamando el método <code>XMLHttpRequest</code>'s <code>open()</code> para empezar a generar la POST solicitud.</li> - <li>El tipo MIME para la carga esta configurada para llamar la función<code> XMLHttpRequest</code> function <code>overrideMimeType()</code>. En este caso, estamos usando un tipo MIME genérico; puede o no ser necesario para configurar el tipo MIME para todo, dependiendo de su caso de uso.</li> - <li>Finalmente la función <code>XMLHttpRequest</code> <code>sendAsBinary()</code> es llamada para cargar el contenido de el archivo. <em>Esto necesita ser revisado; en la actualidad esta obsoleto la rutina para extraer datos desde archivos getAsBinary() síncrona.</em></li> -</ol> - -<h3 id="Manejando_el_proceso_de_carga_para_un_archivo_asíncronicamente">Manejando el proceso de carga para un archivo, asíncronicamente</h3> - -<pre class="deki-transform">function fileUpload(file) { - // Please report improvements to: marco.buratto at tiscali.it - - var fileName = file.name, - fileSize = file.size, - fileData = file.getAsBinary(), // works on TEXT data ONLY. - boundary = "xxxxxxxxx", - uri = "serverLogic.php", - 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 >= 200 && xhr.status <= 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 también necesita ser modificado para trabajar con datos binarios.</em></p> - -<h2 id="Vea_también">Vea 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">Using XMLHttpRequest</a></li> - <li><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a></li> -</ul> |