¿Cómo instanciar un objeto File en JavaScript?

Respuestas:

204

De acuerdo con la especificación W3C File API, el constructor de archivos requiere 2 (o 3) parámetros.

Entonces, para crear un archivo vacío, haga lo siguiente:

var f = new File([""], "filename");
  • El primer argumento son los datos proporcionados como una matriz de líneas de texto;
  • El segundo argumento es el nombre del archivo;
  • El tercer argumento se ve así:

    var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})

Funciona en Firefox, Chrome y Opera, pero no en Safari o IE / Edge.

AlainD
fuente
2
Produce Illegal constructoren Chrome 37 / Ubuntu, así que no, no funciona
Sebastien Lorber
2
Esto funciona en Firefox 28+, Chrome 38+ y Opera 25+. Sin embargo, Safari e IE todavía no implementan este constructor hoy (ver caniuse.com/#feat=fileapi ). Actualmente estoy buscando un polyfill o una forma de emular esto, pero hasta ahora no encontré ninguna solución adecuada.
Pierre-Adrien Buisson
@ PA.Buisson No estoy seguro de si esto es válido para todos los casos (fue suficiente para mí), pero puede usar el constructor Blob () en su lugar, como se sugiere aquí
raymondboswel
2
¿Cuál es la alternativa de esto para windows edge?
Ravi Mishra
3
Para IE11, puede usar la clase Blob para construir un objeto File. Esta parece ser la solución más portátil para mí. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
Jesse Hogan
30

¡Ahora usted puede!

var parts = [
  new Blob(['you construct a file...'], {type: 'text/plain'}),
  ' Same way as you do with blob',
  new Uint16Array([33])
];

// Construct a file
var file = new File(parts, 'sample.txt', {
    lastModified: new Date(0), // optional - default = now
    type: "overide/mimetype" // optional - default = ''
});

var fr = new FileReader();

fr.onload = function(evt){
   document.body.innerHTML = evt.target.result + "<br><a href="+URL.createObjectURL(file)+" download=" + file.name + ">Download " + file.name + "</a><br>type: "+file.type+"<br>last modified: "+ file.lastModifiedDate
}

fr.readAsText(file);

Sin fin
fuente
No, no funciona en Chrome. Consulte code.google.com/p/chromium/issues/detail?id=164933 . Verificó que no funciona en Chrome 36 OSX.
Ray Nicholus
luego verificaré que la DOSIS funcione en Chrome 35 OSX cuando ejecutesnew File([], '')
Endless
Recién probado, tampoco funciona en 35. Ajuste su respuesta para reflejar el hecho de que esto solo funciona en Firefox.
Ray Nicholus
hmm, tienes razón solo funcionó para mí ya que activé una bandera de Chrome experimental ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
Endless
Produce Illegal constructoren Chrome 37 / Ubuntu
Sebastien Lorber
19

Actualizar

BlobBuilder ha quedado obsoleto, vea cómo lo usa, si lo está utilizando para fines de prueba.

De lo contrario, aplique lo siguiente con las estrategias de migración de ir a Blob , como las respuestas a esta pregunta .

Use un blob en su lugar

Como alternativa, hay un Blob que puede usar en lugar de File, ya que es de donde se deriva la interfaz File de acuerdo con las especificaciones del W3C :

interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

La interfaz de archivo se basa en Blob, hereda la funcionalidad de blob y la expande para admitir archivos en el sistema del usuario.

Crea el blob

Usar el BlobBuilder como este en un método JavaScript existente que toma un archivo para cargar XMLHttpRequesty proporcionar un Blob funciona bien de esta manera:

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder;
var bb = new BlobBuilder();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsfiddle.net/img/logo.png', true);

xhr.responseType = 'arraybuffer';

bb.append(this.response); // Note: not xhr.responseText

//at this point you have the equivalent of: new File()
var blob = bb.getBlob('image/png');

/* more setup code */
xhr.send(blob);

Ejemplo extendido

El resto de la muestra está disponible en jsFiddle de una manera más completa, pero no se cargará correctamente, ya que no puedo exponer la lógica de carga a largo plazo.

Nick Josevski
fuente
11
Este comentario está desactualizado. No use BlobBuilder, use Blob constructor. Blob (['mythingy'], {type: "thingy"})
odinho - Velmont
Este código no se ejecuta. TypeError: BlobBuilder no es un constructor
Puntero nulo
2
Desafortunadamente, BlobBuilder está obsoleto: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.
DataTransferItemList.addrequiere Fileno Blob. Entonces, a la pregunta original: ¿Cómo instanciar un archivo ?
Tomáš Zato - Restablece a Mónica el
1

Ahora es posible y compatible con todos los principales navegadores: https://developer.mozilla.org/en-US/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
Pavel Evstigneev
fuente
44
Por mucho que me duela decir esto, edge es un navegador importante.
li x
No vi mucha gente usándolo en realidad. caniuse.com/#feat=fileapi - IE 2.6%, Edge - 1.4%, Opera Mini - 2.7%. En netmarketshare.com/browser-market-share.aspx es del 4,3%. Si le importa Edge, entonces necesita encontrar una solución para desarrolladores.microsoft.com/en-us/microsoft-edge/platform/issues/…
Pavel Evstigneev
Evestigneev ha malinterpretado los resultados ya que los navegadores compatibles tienen un uso global de alrededor del 0.2%. Esta cifra es la cantidad de navegadores que utilizan la API mientras que edge / IE en sí representan alrededor del 15% de los navegadores que todavía están en uso.
li x
0

La idea ... Para crear un objeto File (api) en javaScript para imágenes ya presentes en el DOM:

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

¡No hagas eso! ... (pero lo hice de todos modos)

-> la consola da un resultado similar a un archivo de objeto:

File(0) {name: "fijRKjokDhgfsKtG1527053050.jpg", lastModified: 1527053530715, lastModifiedDate: Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)), webkitRelativePath: "", size: 0, …}
lastModified:1527053530715
lastModifiedDate:Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)) {}
name:"fijRKjokDhgfsKtG1527053050.jpg"
size:0
type:"image/jpg"
webkitRelativePath:""__proto__:File

Pero el tamaño del objeto está mal ...

¿Por qué necesito hacer eso?

Por ejemplo, para retransmitir un formulario de imagen ya cargado, durante una actualización del producto, junto con imágenes adicionales agregadas durante la actualización

SNS - Web et Informatique
fuente
-5

Como se trata de javascript y dinámico, puede definir su propia clase que coincida con la interfaz de archivo y utilizarla en su lugar.

Tuve que hacer eso con dropzone.js porque quería simular una carga de archivo y funciona en objetos File.

Ian1971
fuente