JavaScriptでFileオブジェクトをインスタンス化する方法は？

FileJavaScriptにはオブジェクトがあります。テスト用にインスタンス化したい。

を試しましたnew File()が、「不正なコンストラクタ」エラーが発生します。

Fileオブジェクトを作成することは可能ですか？

ファイルオブジェクトリファレンス：https : //developer.mozilla.org/en/DOM/File

W3CファイルAPI仕様によれば、ファイルコンストラクターには2（または3）個のパラメーターが必要です。

空のファイルを作成するには、次のようにします。

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

• 最初の引数は、テキスト行の配列として提供されるデータです。
• 2番目の引数はファイル名です。

• 3番目の引数は次のようになります。

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

FireFox、Chrome、Operaでは機能しますが、SafariやIE / Edgeでは機能しません。

今できます！

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

更新

BlobBuilderは廃止されました。テスト目的で使用している場合は、BlobBuilderの使用方法を確認してください。

それ以外の場合は、この質問への回答など、Blobに移行するための移行戦略を以下に適用します。

代わりにBlobを使用してください

代替として、W3C仕様に従ってFileインターフェースから派生したものであるFileの代わりに使用できるBlobがあります。

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

FileインターフェイスはBlobに基づいており、Blob機能を継承し、ユーザーのシステム上のファイルをサポートするように拡張します。

ブロブを作成する

Fileを介してアップロードし、それにBlobを提供する既存のJavaScriptメソッドでこのようなBlobBuilderを使用すると、次のように正常XMLHttpRequestに動作します。

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

拡張された例

サンプルの残りの部分は、より完全な方法でjsFiddleで稼働していますが、アップロードロジックを長期間にわたって公開できないため、正常にアップロードされません。

今では、すべての主要なブラウザーで可能であり、サポートされています。https：//developer.mozilla.org/en-US/docs/Web/API/File/File

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

アイデア... DOMに既に存在する画像のjavaScriptでFileオブジェクト（api）を作成するには：

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

やめて！...（とにかく私はそれをやった）

->コンソールはオブジェクトファイルと同様の結果を提供します。

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

しかし、オブジェクトのサイズが間違っています...

なぜ私はそれをする必要があるのですか？

たとえば、製品のアップデート中にすでにアップロードされている画像フォームを、アップデート中に追加された追加の画像とともに再送信するには

これはJavaScriptと動的なので、Fileインターフェースに一致する独自のクラスを定義して、代わりにそれを使用できます。

ファイルアップロードをシミュレートしたかったので、dropzone.jsでそれを実行する必要があり、それはFileオブジェクトで機能しました。