Bagaimana cara membuat instance objek File di JavaScript?

Ada Fileobjek di JavaScript. Saya ingin membuat contoh untuk tujuan pengujian.

Saya telah mencoba new File(), tetapi saya mendapatkan kesalahan "Konstruktor ilegal".

Apakah mungkin membuat sebuah Fileobjek?

Referensi Objek File: https://developer.mozilla.org/en/DOM/File

Menurut spesifikasi API File W3C, konstruktor File memerlukan 2 (atau 3) parameter.

Jadi untuk membuat file kosong lakukan:

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

• Argumen pertama adalah data yang disediakan sebagai larik baris teks;
• Argumen kedua adalah nama file;

• Argumen ketiga terlihat seperti:

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

Ia bekerja di FireFox, Chrome dan Opera, tetapi tidak di Safari atau IE / Edge.

Sekarang kamu bisa!

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

Memperbarui

BlobBuilder telah usang, lihat bagaimana Anda menggunakannya, jika Anda menggunakannya untuk tujuan pengujian.

Jika tidak, terapkan di bawah ini dengan strategi migrasi pergi ke Blob , seperti jawaban atas pertanyaan ini .

Gunakan Blob sebagai gantinya

Sebagai alternatif, ada Blob yang dapat Anda gunakan sebagai pengganti File karena antarmuka File berasal dari sesuai spesifikasi W3C :

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

Antarmuka File didasarkan pada Blob, yang mewarisi fungsi blob dan memperluasnya untuk mendukung file di sistem pengguna.

Buat Blob

Menggunakan BlobBuilder seperti ini pada metode JavaScript yang ada yang mengambil File untuk diunggah melalui XMLHttpRequestdan memasok Blob ke sana berfungsi dengan baik seperti ini:

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

Contoh yang diperluas

Sampel lainnya tersedia di jsFiddle dengan cara yang lebih lengkap tetapi tidak akan berhasil diupload karena saya tidak dapat mengungkapkan logika upload dalam jangka panjang.

Sekarang mungkin dan didukung oleh semua browser utama: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

Idenya ... Untuk membuat objek File (api) di javaScript untuk gambar yang sudah ada di 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);

Jangan lakukan itu! ... (tapi aku tetap melakukannya)

-> konsol memberikan hasil yang mirip dengan Object 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

Tapi ukuran benda itu salah ...

Mengapa saya perlu melakukan itu?

Misalnya untuk mengirim ulang formulir gambar yang sudah diunggah, selama pembaruan produk, bersama dengan gambar tambahan yang ditambahkan selama pembaruan

Karena ini adalah javascript dan dinamis, Anda dapat menentukan kelas Anda sendiri yang cocok dengan antarmuka File dan menggunakannya sebagai gantinya.

Saya harus melakukan hal itu dengan dropzone.js karena saya ingin mensimulasikan pengunggahan file dan berfungsi pada objek File.