Comment instancier un objet fichier en JavaScript?

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

mise à Jour

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

autrement appliquer le ci-dessous avec les stratégies de migration d'aller à Blob , comme les réponses à cette question .

utiliser un Blob à la place

comme une alternative il ya un Blob que vous pouvez utiliser à la place de fichier comme il est ce que l'interface de fichier dérive selon W3C spec :

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

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

créer le Blob

à l'Aide de le BlobBuilder comme ceci sur une méthode JavaScript existante qui prend un fichier à télécharger via XMLHttpRequest et fournir une Blob à lui fonctionne très 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'échantillon est en place sur jsFiddle d'une manière plus complète, mais ne sera pas télécharger avec succès car je ne peux pas exposer la logique de téléchargement à long terme.

maintenant, il 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 ...de créer un objet Fichier (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 faites pas ça ! ... (mais je n'ai de toute façon)

- > la console donne un résultat similaire à celui d'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 incorrect ...

pourquoi je dois faire ça ?

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

comme il s'agit de javascript et dynamique, vous pouvez définir votre propre classe qui correspond à l'interface de fichier et l'utiliser à la place.

c'est exactement ce que j'ai dû faire avec dropzone.js parce que je voulais simuler un téléchargement de fichier et qu'il fonctionne sur des objets de fichier.