Comment instancier un objet de Fichier en JavaScript?

Il y a un File objet en JavaScript. Je veux instancier l'une des fins de test.

J'ai essayé new File(), mais j'obtiens un "Illégal constructeur d'erreur".

Est-il possible de créer un File objet ?

Fichier de référence de l'Objet : https://developer.mozilla.org/en/DOM/File

InformationsquelleAutor julesbou | 2011-12-05

184

Selon le W3C Fichier de spécification de l'API, le Fichier constructeur requiert 2 (ou 3) des paramètres.

Afin de créer un fichier vide n':
```
var f = new File([""], "filename");
```
- Le premier argument est que les données fournies dans un tableau de lignes de texte;
- Le deuxième argument est le nom de fichier ;
- Le troisième argument ressemble:
```
var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})
```
Il fonctionne dans FireFox, Chrome et Opera, mais pas dans Safari ou IE/Edge.
- Je ne sais pas pourquoi cela a été downvoted, la meilleure réponse de l'omi
- Produit Illegal constructor sur Chrome 37 / Ubuntu donc pas qu'il ne fonctionne pas
- Ceci fonctionne dans Firefox 28+, Chrome 38+ et Opera 25+.Cependant, Safari et IE toujours de ne pas mettre en œuvre ce constructeur aujourd'hui (voir la section caniuse.com/#feat=fileapi). Je suis actuellement à la recherche d'un polyfill ou une façon d'imiter, mais n'avait pas trouver aucune solution convenable à ce jour.
- Je ne sais pas si cela est valable pour tous les cas(c'était suffisant pour moi), mais vous pouvez utiliser le Blob() constructeur au lieu de cela, comme l'a suggéré ici
- Quelle est la variante de ce pour windows bord?
- Fonctionne dans Safari à compter du 19 Juin 2018. version: Safari 11.1.1.
- Comment faites-vous cela dans nodeJS?
- Pour IE11, vous pouvez utiliser le Blob de la classe pour construire un objet de Fichier. Cela semble être la solution la plus compacte pour moi. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
- Personne ne sait, comment obtenir le chemin d'accès du fichier?.
InformationsquelleAutor AlainD
29

Maintenant vous pouvez!

JS:
```
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);
```
- Non, il ne fonctionne pas sous Chrome. Voir code.google.com/p/chromium/issues/detail?id=164933. Vérifié qu'il ne fonctionne pas sous Chrome 36 OSX.
- ensuite, je vais Vérifier que la DOSE de travail en Chrome 35 OSX lorsque vous exécutez new File([], '')
- Viens de tester, ça ne fonctionne pas dans 35 soit. S'il vous plaît ajuster votre réponse afin de refléter le fait que cela ne fonctionne que sous Firefox.
- hmm, vous avez raison. il y a du travail pour moi car j'avais activé une expérimentales chrome drapeau... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
- Produit Illegal constructor sur Chrome 37 / Ubuntu
- Travail en Chrome 45 pour moi
InformationsquelleAutor Endless
19

Mise à jour

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

Sinon appliquer le ci-dessous avec les stratégies de migration des va Blob, tels que les réponses aux cette question.

Utiliser une Goutte au lieu

Comme une alternative il y a un Blob que vous pouvez utiliser à la place de Fichier que c'est ce que l'interface de Fichier en découle que par Spec W3C:
```
interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};
```
Le Fichier interface est basée sur la Goutte, héritant blob de la fonctionnalité et de l'élargir à l'appui de fichiers sur le système de l'utilisateur.

Créer le Blob

À l'aide de la BlobBuilder comme cela sur les résultats d'une méthode JavaScript qui prend un Fichier à télécharger via XMLHttpRequest et la fourniture d'une Goutte pour qu'il fonctionne très bien comme cela:
```
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

Le reste de l'échantillon est en place sur jsFiddle dans une plus complète de la mode, mais n'aura pas réussi à télécharger comme je ne peux pas exposer la logique de téléchargement dans un long terme de mode.
- Ce commentaire est hors de date. Ne pas utiliser BlobBuilder, l'utilisation d'objets Blob constructeur. Blob(['mythingy'], { type: "bidule" })
- Ce code n'est pas exécuté. TypeError: BlobBuilder n'est pas un constructeur
- Malheureusement, BlobBuilder est obsolète: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
- DataTransferItemList.add nécessite File pas Blob. Donc à la question initiale: Comment instancier Fichier?
InformationsquelleAutor Nick Josevski
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",
});
```
- Autant que cela me fait mal de le dire, à bord est un grand navigateur.
- Je n'ai pas vu beaucoup de personnes qui l'utilisent réellement. caniuse.com/#feat=fileapi - soit 2,6%, les bords De 1,4%, Opera Mini - 2.7%. Sur netmarketshare.com/browser-market-share.aspx est de 4,3%. Si vous vous souciez de Bord, puis besoin de trouver une solution de contournement developer.microsoft.com/en-us/microsoft-edge/platform/issues/...
- Evestigneev vous avez mal interprété les résultats, car les navigateurs pris en charge à l'échelle mondiale pour l'utilisation de l'ordre de 0,2%. Ce chiffre est de savoir comment de nombreux navigateurs sont à l'aide de l'api de tout bord / IE lui-même représentent environ 15% des navigateurs encore en usage.
InformationsquelleAutor Pavel Evstigneev

L'idée ...Pour créer un Fichier objet (api) en javaScript pour les images déjà présentes dans les 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 le faites pas ! ... (mais je n'ai de toute façon)

-> la console de donner un résultat semblable comme un Objet de Fichier :

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 j'ai besoin de faire cela ?

Par exemple pour retransmettre
une forme d'une image déjà téléchargé, lors d'une mise à jour du produit, de même que des images ajoutées lors de la mise à jour

InformationsquelleAutor SNS - Web et Informatique

-5

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

J'ai eu à faire avec dropzone.js parce que j'ai voulu simuler un upload de fichier et il fonctionne sur les objets de Fichier.

InformationsquelleAutor Ian1971

Vous devez vous connecter pour publier un commentaire.

Utiliser une Goutte au lieu

Créer le Blob

Exemple