¿Cómo instanciar un objeto File en JavaScript?

Hay un Fileobjeto en JavaScript. Quiero crear una instancia con fines de prueba.

Lo he intentado new File(), pero aparece el error "Constructor ilegal".

¿Es posible crear un Fileobjeto?

Referencia de objeto de archivo: https://developer.mozilla.org/en/DOM/File

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.

¡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);

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.

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",
});

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

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.