Làm thế nào để khởi tạo một đối tượng Tệp trong JavaScript?

Có một Fileđối tượng trong JavaScript. Tôi muốn khởi tạo một cho mục đích thử nghiệm.

Tôi đã thử new File(), nhưng tôi gặp lỗi "Nhà xây dựng bất hợp pháp".

Có thể tạo ra một Fileđối tượng?

Tham chiếu đối tượng tệp: https://developer.mozilla.org/en/DOM/File

Theo đặc tả API tệp W3C, hàm tạo tệp yêu cầu 2 (hoặc 3) tham số.

Vì vậy, để tạo một tập tin trống làm:

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

• Đối số đầu tiên là dữ liệu được cung cấp dưới dạng một mảng các dòng văn bản;
• Đối số thứ hai là tên tệp;

• Đối số thứ ba trông giống như:

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

Nó hoạt động trong FireFox, Chrome và Opera, nhưng không có trong Safari hoặc IE / Edge.

Bây giờ bạn có thể!

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

Cập nhật

BlobBuilder đã bị lỗi thời khi xem cách bạn sử dụng nó, nếu bạn đang sử dụng nó cho mục đích thử nghiệm.

Mặt khác, áp dụng cách dưới đây với các chiến lược di chuyển đến Blob , chẳng hạn như câu trả lời cho câu hỏi này .

Sử dụng Blob thay thế

Thay vào đó, có một Blob mà bạn có thể sử dụng thay cho Tệp vì đó là giao diện Tệp xuất phát từ thông số W3C :

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

Giao diện Tệp dựa trên Blob, kế thừa chức năng blob và mở rộng nó để hỗ trợ các tệp trên hệ thống của người dùng.

Tạo Blob

Sử dụng BlobBuilder như thế này trên một phương thức JavaScript hiện có, có một Tệp để tải lên qua XMLHttpRequestvà cung cấp một Blob cho nó hoạt động tốt như thế này:

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

Ví dụ mở rộng

Phần còn lại của mẫu là trên jsFiddle theo cách hoàn thiện hơn nhưng sẽ không tải lên thành công vì tôi không thể phơi bày logic tải lên trong một thời gian dài.

Giờ đây, nó có thể và được hỗ trợ bởi tất cả các trình duyệt chính: https://developer.mozilla.org/en-US/docs/Web/API/File/File

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

Ý tưởng ... Để tạo một đối tượng Tệp (api) trong javaScript cho các hình ảnh đã có trong 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);

Đừng làm vậy! ... (Nhưng dù sao tôi cũng đã làm được)

-> bàn điều khiển cho kết quả tương tự như Tệp đối tượng:

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

Nhưng kích thước của vật thể là sai ...

Tại sao tôi cần phải làm điều đó?

Ví dụ: để truyền lại một hình ảnh đã được tải lên, trong khi cập nhật sản phẩm, cùng với các hình ảnh bổ sung được thêm vào trong quá trình cập nhật

Bởi vì đây là javascript và động, bạn có thể xác định lớp của riêng mình phù hợp với giao diện Tệp và sử dụng thay thế.

Tôi đã phải làm điều đó với dropzone.js vì tôi muốn mô phỏng tải lên tệp và nó hoạt động trên các đối tượng Tệp.