Comment instancier un objet File en JavaScript?

Il y a un Fileobjet en JavaScript. Je souhaite en instancier un à des fins de test.

J'ai essayé new File(), mais j'obtiens une erreur "Constructeur illégal".

Est-il possible de créer un Fileobjet?

Référence de l'objet fichier: https://developer.mozilla.org/en/DOM/File

Selon la spécification de l'API de fichier W3C, le constructeur de fichier nécessite 2 (ou 3) paramètres.

Donc, pour créer un fichier vide, faites:

var f = new File([""], "filename");

• Le premier argument est les données fournies sous forme de tableau de lignes de texte;
• Le deuxième argument est le nom du fichier;

• Le troisième argument ressemble à ceci:

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

Cela fonctionne dans FireFox, Chrome et Opera, mais pas dans Safari ou IE / Edge.

Maintenant vous pouvez!

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

Mettre à jour

BlobBuilder est obsolète voyez comment vous allez l'utiliser, si vous l'utilisez à des fins de test.

Sinon, appliquez ce qui suit avec des stratégies de migration allant vers Blob , telles que les réponses à cette question .

Utilisez plutôt un objet blob

Comme alternative, il existe un Blob que vous pouvez utiliser à la place de File car c'est ce dont l'interface File dérive selon les spécifications du W3C :

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

L'interface de fichier est basée sur Blob, héritant de la fonctionnalité blob et l'étendant pour prendre en charge les fichiers sur le système de l'utilisateur.

Créer le blob

Utiliser le BlobBuilder comme celui-ci sur une méthode JavaScript existante qui prend un fichier à télécharger via XMLHttpRequestet lui fournir un Blob fonctionne bien comme ceci:

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

Exemple étendu

Le reste de l'exemple est disponible sur jsFiddle de manière plus complète mais ne sera pas téléchargé avec succès car je ne peux pas exposer la logique de téléchargement à long terme.

Maintenant, c'est possible et pris en charge par tous les principaux navigateurs: https://developer.mozilla.org/en-US/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

L'idée ... Pour créer un objet File (api) en javaScript pour les images déjà présentes dans le 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);

Ne fais pas ça! ... (mais je l'ai fait quand même)

-> la console donne un résultat similaire à un fichier objet:

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

Mais la taille de l'objet est fausse ...

Pourquoi ai-je besoin de faire ça?

Par exemple pour retransmettre un formulaire image déjà téléchargé, lors d'une mise à jour de produit, avec des images supplémentaires ajoutées lors de la mise à jour

Parce que c'est javascript et dynamique, vous pouvez définir votre propre classe qui correspond à l'interface File et l'utiliser à la place.

Je devais le faire avec dropzone.js car je voulais simuler un téléchargement de fichier et cela fonctionne sur les objets File.