Bagaimana cara membuat instance objek File di JavaScript?


Jawaban:


216

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.


2
Menghasilkan Illegal constructordi Chrome 37 / Ubuntu jadi tidak ada itu tidak bekerja
Sebastien Lorber

2
Ini berfungsi di Firefox 28+, Chrome 38+, dan Opera 25 +. Namun, Safari dan IE masih tidak mengimplementasikan konstruktor ini hari ini (lihat caniuse.com/#feat=fileapi ). Saat ini saya sedang mencari polyfill atau cara untuk meniru ini, tetapi sejauh ini tidak menemukan solusi yang cocok.
Pierre-Adrien Buisson

@ PA. Buisson Saya tidak yakin apakah ini berlaku untuk semua kasus (itu cukup bagi saya), tetapi Anda dapat menggunakan konstruktor Blob () sebagai gantinya, seperti yang disarankan di sini
raymondboswel

2
Apa alternatif ini untuk tepi jendela?
Ravi Mishra

3
Untuk IE11, Anda dapat menggunakan kelas Blob untuk membuat objek File. Ini sepertinya solusi paling portabel bagi saya. file = new Blob([blobdata], {type: filetype, lastModified: filelastModified}); file.name = filename
Jesse Hogan

31

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


Tidak, ini tidak berfungsi di Chrome. Lihat code.google.com/p/chromium/issues/detail?id=164933 . Diverifikasi bahwa itu tidak berfungsi di Chrome 36 OSX.
Ray Nicholus

maka saya akan memverifikasi bahwa itu DOSE bekerja di Chrome 35 OSX saat Anda menjalankannew File([], '')
Endless

Baru saja diuji, itu juga tidak berfungsi di 35. Harap sesuaikan jawaban Anda untuk mencerminkan fakta bahwa ini hanya berfungsi di Firefox.
Ray Nicholus

hmm, kamu benar. itu hanya berfungsi untuk saya karena saya telah mengaktifkan bendera chrome eksperimental ... dl.dropboxusercontent.com/u/3464804/jCmQr8vrGk.gif
Endless

Diproduksi Illegal constructordi Chrome 37 / Ubuntu
Sebastien Lorber

19

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.


11
Komentar ini kedaluwarsa. Jangan gunakan BlobBuilder, gunakan konstruktor Blob. Blob (['mythingy'], {type: "thingy"})
odinho - Velmont

Kode ini tidak berjalan. TypeError: BlobBuilder bukan konstruktor
Pointer Null

2
Sayangnya, BlobBuilder sudah usang: developer.mozilla.org/en-US/docs/Web/API/BlobBuilder
JD.

DataTransferItemList.addFiletidak membutuhkan Blob. Jadi ke pertanyaan awal: Bagaimana cara membuat Instansiasi File ?
Tomáš Zato - Kembalikan Monica

2

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",
});

4
Meski menyakitkan saya untuk mengatakan ini, edge adalah browser utama.
li x

Sebenarnya saya tidak melihat banyak orang yang menggunakannya. caniuse.com/#feat=fileapi - IE 2.6%, Edge - 1.4%, Opera Mini - 2.7%. Di netmarketshare.com/browser-market-share.aspx adalah 4,3%. Jika Anda peduli dengan Edge, maka perlu mencari beberapa pengembang
solusi.microsoft.com/en-us/microsoft-edge/platform/issues/…

Evestigneev Anda salah menafsirkan hasil karena browser yang didukung memiliki penggunaan global sekitar 0,2%. Angka ini adalah berapa banyak browser yang menggunakan api sementara edge / IE sendiri membuat sekitar 15% dari browser yang masih digunakan.
li x

1

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


-5

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.