JavaScript'te bir File nesnesi nasıl oluşturulur?

FileJavaScript'te bir nesne var . Test amacıyla bir örnek oluşturmak istiyorum.

Denedim new File(), ancak "Yasadışı kurucu" hatası alıyorum.

Bir Filenesne yaratmak mümkün müdür ?

Dosya Nesnesi başvurusu: https://developer.mozilla.org/en/DOM/File

W3C Dosya API'sı belirtimine göre, Dosya yapıcısı 2 (veya 3) parametre gerektirir.

Boş bir dosya oluşturmak için şunları yapın:

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

• İlk argüman bir metin satırı dizisi olarak sağlanan verilerdir;
• İkinci argüman dosya adı;

• Üçüncü argüman şöyle:

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

FireFox, Chrome ve Opera'da çalışır, ancak Safari veya IE / Edge'de çalışmaz.

Şimdi yapabilirsin!

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

Güncelleme

Test amacıyla kullanıyorsanız, BlobBuilder kullanımdan kaldırıldığını görün.

Aksi takdirde , bu sorunun yanıtları gibi Blob'a gitme göç stratejileri ile aşağıdakileri uygulayın .

Bunun yerine bir Blob kullanın

Alternatif olarak, Dosya arayüzünün W3C spesifikasyonlarına göre türetildiği gibi Dosya yerine kullanabileceğiniz bir Blob vardır :

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

Dosya arayüzü Blob'u temel alır, blob işlevselliğini devralır ve kullanıcının sistemindeki dosyaları destekleyecek şekilde genişletir.

Blob'u Oluştur

BlobBuilder'ı , karşıya yüklenecek bir Dosya alan mevcut bir JavaScript yönteminde kullanmak ve bir Blob'uXMLHttpRequest sağlamak şu şekilde çalışır:

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

Genişletilmiş örnek

Numunenin geri kalanı jsFiddle'da daha eksiksiz bir şekilde çalışıyor, ancak yükleme mantığını uzun süreli olarak gösteremediğim için başarılı bir şekilde yüklenmeyecek.

Artık mümkün ve tüm büyük tarayıcılar tarafından destekleniyor: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

Fikir ... DOM'da zaten bulunan görüntüler için javaScript'te bir File nesnesi (api) oluşturmak için:

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

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

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

Bunu yapma! ... (ama yine de yaptım)

-> konsol Nesne Dosyası'na benzer bir sonuç verir:

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

Ama nesnenin boyutu yanlış ...

Bunu neden yapmam gerekiyor?

Örneğin, ürün güncellemesi sırasında önceden yüklenmiş bir görüntü formunu ve güncelleme sırasında eklenen ek resimleri yeniden iletmek için

Bu javascript ve dinamik olduğundan, Dosya arabirimiyle eşleşen kendi sınıfınızı tanımlayabilir ve bunun yerine kullanabilirsiniz.

Bir dosya yüklemesini simüle etmek istediğimden ve File nesneleri üzerinde çalıştığından dropzone.js ile bunu yapmak zorunda kaldım.