Comment instancier un objet File en JavaScript?

Réponses:

204

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.

AlainD
la source
2
Produit Illegal constructorsur Chrome 37 / Ubuntu donc non ça ne fonctionne pas
Sebastien Lorber
2
Cela fonctionne dans Firefox 28+, Chrome 38+ et Opera 25+. Cependant, Safari et IE n'implémentent toujours pas ce constructeur aujourd'hui (voir caniuse.com/#feat=fileapi ). Je suis actuellement à la recherche d'un polyfill ou d'un moyen d'émuler cela, mais je n'ai pas trouvé de solution appropriée jusqu'à présent.
Pierre-Adrien Buisson
@ PA.Buisson Je ne sais pas si cela vaut pour tous les cas (c'était suffisant pour moi), mais vous pouvez utiliser le constructeur Blob () à la place, comme suggéré ici
raymondboswel
2
Quelle est l'alternative à cela pour Windows Edge?
Ravi Mishra
3
Pour IE11, vous pouvez utiliser la classe Blob pour construire un objet File. Cela me semble être la solution la plus portable. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
Jesse Hogan
30

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

Interminable
la source
Non, cela ne fonctionne pas dans Chrome. Voir code.google.com/p/chromium/issues/detail?id=164933 . Vérifié que cela ne fonctionne pas dans Chrome 36 OSX.
Ray Nicholus
alors je vérifierai qu'il DOSE fonctionne dans Chrome 35 OSX lorsque vous exécuteznew File([], '')
sans fin le
Juste testé, il ne fonctionne pas non plus en 35. Veuillez ajuster votre réponse pour refléter le fait que cela ne fonctionne que dans Firefox.
Ray Nicholus
hmm, vous avez raison. cela n'a fonctionné que pour moi depuis que j'avais activé un indicateur de chrome expérimental ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
sans fin
Produit Illegal constructorsur Chrome 37 / Ubuntu
Sebastien Lorber
19

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.

Nick Josevski
la source
11
Ce commentaire est obsolète. N'utilisez pas BlobBuilder, utilisez le constructeur Blob. Blob (['mythingy'], {type: "thingy"})
odinho - Velmont
Ce code ne s'exécute pas. TypeError: BlobBuilder n'est pas un constructeur
Pointer Null
2
Malheureusement, BlobBuilder est obsolète: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.
DataTransferItemList.addFilene nécessite pas Blob. Donc à la question d'origine: comment instancier un fichier ?
Tomáš Zato - Réintégrer Monica
1

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",
});
Pavel Evstigneev
la source
4
Autant cela me fait mal de le dire, Edge est un navigateur majeur.
li x
Je n'ai pas vu beaucoup de gens l'utiliser en fait. caniuse.com/#feat=fileapi - IE 2,6%, Edge - 1,4%, Opera Mini - 2,7%. Sur netmarketshare.com/browser-market-share.aspx est de 4,3%. Si vous vous souciez d'Edge, vous devez trouver une solution de contournement developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
Pavel Evstigneev
Evestigneev vous avez mal interprété les résultats car les navigateurs pris en charge ont une utilisation globale d'environ 0,2%. Ce chiffre correspond au nombre de navigateurs utilisant l'API alors que Edge / IE représente lui-même environ 15% des navigateurs encore utilisés.
li x
0

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

SNS - Web et Informatique
la source
-5

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.

Ian1971
la source