web-dev-qa-db-fra.com

Comment instancier un objet File en JavaScript?

Il y a un File object en JavaScript. Je veux en instancier un à des fins de test.

J'ai essayé new File(), mais l'erreur "Constructeur illégal" est générée.

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

Fichier Référence d'objet: https://developer.mozilla.org/en/DOM/File

javascriptfile-uploadupload
117
julesbou

Selon les spécifications 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.

155
AlainD

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

24
Endless

Mettre à jour

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

Sinon, appliquez ce qui suit avec les stratégies de migration d'aller à Blob, telles que les réponses à cette question .

Utilisez un blob à la place

En guise d'alternative, il existe un Blob que vous pouvez utiliser à la place de Fichier car c'est ce que l'interface de fichier dérive de selon spécification W3C :

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

L'interface de fichier est basée sur Blob. Elle hérite de la fonctionnalité de blob et l'a développée pour prendre en charge des fichiers sur le système de l'utilisateur.

Créer le blob

Utiliser le BlobBuilder comme ceci sur une méthode JavaScript existante qui prend un fichier à télécharger via XMLHttpRequest et lui fournit un blob qui fonctionne 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 en place sur jsFiddle de manière plus complète, mais le téléchargement échouera car je ne peux pas exposer la logique de téléchargement à long terme.

18
Nick Josevski

C'est désormais possible et supporté 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",
});
1
Pavel Evstigneev

L'idée ... Pour créer un objet File (api) en javaScript pour des 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 quand même fait)

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

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

0
SNS - Web et Informatique