From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/blob/blob/index.html | 75 +++++++++++++ files/es/web/api/blob/index.html | 194 ++++++++++++++++++++++++++++++++++ files/es/web/api/blob/type/index.html | 121 +++++++++++++++++++++ 3 files changed, 390 insertions(+) create mode 100644 files/es/web/api/blob/blob/index.html create mode 100644 files/es/web/api/blob/index.html create mode 100644 files/es/web/api/blob/type/index.html (limited to 'files/es/web/api/blob') diff --git a/files/es/web/api/blob/blob/index.html b/files/es/web/api/blob/blob/index.html new file mode 100644 index 0000000000..5aa6b895d6 --- /dev/null +++ b/files/es/web/api/blob/blob/index.html @@ -0,0 +1,75 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Archivo + - Blob + - File API + - Referencia +translation_of: Web/API/Blob/Blob +--- +

{{APIRef("File API")}}

+ +

El constructor Blob() retorna un nuevo objeto {{domxref("Blob")}} . El contenido del blob consiste en la concatenación de los valores obtenidos en el parrametro array.

+ +

Sintaxis

+ +
var aBlob = new Blob( array, options );
+
+ +

Parámetros

+ +
+
array
+
Es un {{jsxref("Array")}} de {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, objetos {{domxref("USVString")}}, o una mezcla de cualquiera de éstos objetos, que será puesto dentro de {{domxref("Blob")}}. Los objetos USVString estan codificados como UTF-8.
+
options {{optional_inline}}
+
+

Un objeto opcional de tipo {{domxref("BlobPropertyBag")}} que puede especificar las siguientes propiedades:

+ +
+
type {{optional_inline}}
+
El {{Glossary("MIME type")}} de la información que será almacenada en el blob. El valor por defecto es una cadena vacía, ("").
+
endings {{optional_inline}} {{non-standard_inline}}
+
Cómo interpretar los carácteres de nueva línea (\n) en el contenido, si la información es texto. El valor por defecto, transparent, copia los caracteres de nueva línea  en el blob sin cambiarlos. Para convertir las nuevas líneas a la convención nativa del sistema, se especifica endings.
+
+
+
+ +

Valor de retorno

+ +

Un nuevo objeto {{domxref("Blob")}} conteniendo la información especificada.

+ +

Ejemplo

+ +
var unaParteDeArchivo = ['<a id="a"><b id="b">hey!</b></a>']; // un array de un solo DOMString
+var oMiBlob = new Blob(unaParteDeArchivo, {type : 'text/html'}); // el blob
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.Blob.Blob")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/blob/index.html b/files/es/web/api/blob/index.html new file mode 100644 index 0000000000..2ee7811292 --- /dev/null +++ b/files/es/web/api/blob/index.html @@ -0,0 +1,194 @@ +--- +title: Blob +slug: Web/API/Blob +translation_of: Web/API/Blob +--- +

{{ APIRef("File API") }}

+ +

Resumen

+ +

Un objeto Blob representa un objeto tipo fichero de  datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz {{ domxref("File") }} se encuentra basada en un Blob, heredando y expendiendo la funcionalidad de un Blob para soportar archivos en el sistema del usuario.

+ +

Una forma fácil de construir un Blob es invocando el constructor {{domxref("Blob.Blob", "Blob()")}}. Otra manera es utilizando el método slice() para crear un blob que contiene un subconjunto de los datos de otro Blob.

+ +

Constructor

+ +
+
{{domxref("Blob.Blob", "Blob()")}}
+
Regresa un nuevo objeto Blob creado cuyo contenido consiste en la concatenación de un arreglo de valores establecidos en el parámetro de la función.
+
+ +

Propiedades

+ +
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
El tamaño, en bytes,  de los datos contenidos en el objeto Blob
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Una cadena (String) indicando el tipo MIME de los datos contenidos en el Blob. Si el tipo es desconocido, esta cadena será vacía.
+
+ +

Métodos

+ +
+
{{domxref("Blob.slice()")}}
+
Regresa un nuevo objeto Blob conteniendo los datos de un rango específico de bytes del origen del Blob.
+
+ +
Nota: Esté consciente que el método slice() posee prefijos propios del fabricante en algunos exploradores y versiones: blob.mozSlice() para Firefox 12 e inferior y blob.webkitSlice() en Safari. Una versión anterior del método slice(), sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para  blob.mozSlice() ha sido eliminado a partir de  Firefox 30.
+ +

Ejemplos

+ +

Ejemplo de uso de un constructor de Blob

+ +

El siguiente código:

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+
+ +

es equivalente a:

+ +
var oBuilder = new BlobBuilder();
+var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+oBuilder.append(aFileParts[0]);
+var oMyBlob = oBuilder.getBlob('text/xml'); // the blob
+
+ +
+

La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear Blob, pero se encuentra ahora obsoleta y no debería volverse a utilizar.

+
+ +

Ejemplo para crear una URL en un arreglo tipado utilizando un blob

+ +

El siguiente código:

+ +
var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+
+ +

Ejemplo para extraer datos de un Blob

+ +

La única manera de leer contenido de un Blob es utilizando un {{domxref("FileReader")}}. El siguiente código lee el contenido de un Blob como un arreglo tipado.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);
+ +

Al utilizar otros métodos de {{domxref("FileReader")}}, es posible leer los contenidos del Blob como una cadena o una URL de datos.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico541011.105.1
slice()10 {{property_prefix("webkit")}}‡
+ 21		5 {{ property_prefix("moz") }}‡
+ 13		10125.1 (534.29) {{ property_prefix("webkit") }}
Blob() constructor20{{ CompatGeckoDesktop("13.0") }}1012.106 (536.10)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("13.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas en implementaciones del método slice()

+ +

El método slice() ha tomado inicialmente length como el segundo argumento para indicar el número de bytes para copiar en el nuevo Blob. Si usted especificó valores como start + length excediento el tamaño del Blob de origen, el Blob retornado contendrá los datos a partir del índice de inicio hasta el final del Blob de origen.

+ +

Esa versión del método slice() fué implementada en Firefox 4, WebKit, y Opera 11.10. Sin embargo, desde que la sintaxis ha diferido desde  Array.slice() y String.slice(), Gecko y WebKit removieron este soporte y agregaron soporte  para la nueva sintaxis como {{ manch("mozSlice") }}/Blob.webkitSlice.

+ +

Comenzando en Gecko 13.0 {{ geckoRelease("13.0") }} y Chrome 21, {{ manch("slice") }} no se encuentra más prefijado. El soporte para mozSlice() ha sido eliminado en Gecko 30.0 {{ geckoRelease("30.0") }}.‡

+ +

Notas de Gecko

+ +

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, existía un error que afectaba el comportamiento de {{ manch("slice") }}; No funcionaba para las posiciones start and end por fuera del rango de valores de 64 bits con signo; Ha sido ahora arreglado para soportar valores de 64 bits sin signo.

+ +

Disponilidad del alcance del código en Chrome

+ +

El alcance JSM del Blob se encuentra disponible sin la necesidad de hacer nada en especial.

+ +

En el alcance de arranque, este debe importarse de igual modo:

+ +
const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});
+ +

Ver también

+ + diff --git a/files/es/web/api/blob/type/index.html b/files/es/web/api/blob/type/index.html new file mode 100644 index 0000000000..73dc045027 --- /dev/null +++ b/files/es/web/api/blob/type/index.html @@ -0,0 +1,121 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - Archivo + - Archivos + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Blob/type +--- +
{{APIRef("File API")}}
+ +

La propiedad type de un objeto Blob proporciona el tipo MIME del archivo. Retorna una cadena vacía si el tipo no puede ser determinado.

+ +

Sintaxis

+ +
var tipo = instanceOfFile.type
+ +

Valor

+ +

Una cadena

+ +

Ejemplo

+ +
var i, fileInput, files, allowedFileTypes;
+
+// fileInput es un HTMLInputElement: <input type="file" multiple id="myfileinput">
+fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+files = fileInput.files;
+
+// nuestra aplicacion solo acepta imagenes *.png, *.jpeg y *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i < files.length; i++) {
+  // Prueba si file.type es un tipo de archivo permitido.
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+    // El tipo de archivo es uno de los permitidos. Hacer algo aquí.
+  }
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspeficicacionesEstadoComentario
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Definicion inicial.
+ +

Compatibilidad con browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.type5{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}10.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.type{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf