JavaScript tạo đối tượng tệp từ tệp hiện có

Thứ hai, chúng tôi thường xuyên nhận được một tệp từ




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
0 hoặc drag'n'drop hoặc các giao diện trình duyệt khác. Trong trường hợp đó, tệp sẽ lấy thông tin này từ HĐH




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 kế thừa từ Blob, nên các đối tượng của



function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 có cùng thuộc tính, cộng với

  • 
    
    
    function showFile[input] {
      let file = input.files[0];
    
      alert[`File name: ${file.name}`]; // e.g my.png
      alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
    }
    
    4 – tên tệp,
  • lastModified – dấu thời gian của lần sửa đổi cuối cùng

Đó là cách chúng ta có thể lấy một đối tượng




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 từ



function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
0




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}

Xin lưu ý

Đầu vào có thể chọn nhiều tệp, vì vậy




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
8 là một đối tượng giống như mảng với chúng. Ở đây chúng tôi chỉ có một tệp, vì vậy chúng tôi chỉ lấy



function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
9

là một đối tượng với mục đích duy nhất là đọc dữ liệu từ các đối tượng Blob [và do đó cũng là




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1]

Nó cung cấp dữ liệu bằng cách sử dụng các sự kiện, vì việc đọc từ đĩa có thể mất thời gian

nhà xây dựng

let reader = new FileReader[]; // no arguments

Các phương pháp chính

  • let reader = new FileReader[]; // no arguments
    2 – đọc dữ liệu ở định dạng nhị phân
    let reader = new FileReader[]; // no arguments
    3
  • let reader = new FileReader[]; // no arguments
    4 – đọc dữ liệu dưới dạng chuỗi văn bản với mã hóa đã cho [
    let reader = new FileReader[]; // no arguments
    5 theo mặc định]
  • let reader = new FileReader[]; // no arguments
    6 – đọc dữ liệu nhị phân và mã hóa nó dưới dạng url dữ liệu base64
  • let reader = new FileReader[]; // no arguments
    7 – hủy thao tác

Việc lựa chọn phương pháp

let reader = new FileReader[]; // no arguments
8 tùy thuộc vào định dạng chúng tôi thích, cách chúng tôi sẽ sử dụng dữ liệu

  • let reader = new FileReader[]; // no arguments
    9 – đối với các tệp nhị phân, để thực hiện các thao tác nhị phân cấp thấp. Đối với các thao tác cấp cao, như cắt lát,
    
    
    
    function showFile[input] {
      let file = input.files[0];
    
      alert[`File name: ${file.name}`]; // e.g my.png
      alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
    }
    
    1 kế thừa từ Blob, vì vậy chúng tôi có thể gọi chúng trực tiếp mà không cần đọc
  • 
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    2 – đối với tệp văn bản, khi chúng tôi muốn lấy một chuỗi
  • 
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    3 – khi chúng tôi muốn sử dụng dữ liệu này trong
    
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    4 cho
    
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    5 hoặc thẻ khác. Có một cách khác để đọc tệp cho việc đó, như đã thảo luận trong chương Blob.
    
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    6

Khi quá trình đọc diễn ra, có những sự kiện

  • 
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    7 – bắt đầu tải
  • 
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    8 – xảy ra trong khi đọc
  • 
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    9 – không có lỗi, đọc xong
  • Blob0 –
    let reader = new FileReader[]; // no arguments
    7 được gọi
  • Blob2 – đã xảy ra lỗi
  • Blob3 – đọc xong dù thành công hay thất bại

Khi đọc xong, chúng ta có thể truy cập kết quả dưới dạng

  • Blob4 là kết quả [nếu thành công]
  • Blob5 là lỗi [nếu không thành công]

Các sự kiện được sử dụng rộng rãi nhất chắc chắn là




function readFile[input] {
  let file = input.files[0];

  let reader = new FileReader[];

  reader.readAsText[file];

  reader.onload = function[] {
    console.log[reader.result];
  };

  reader.onerror = function[] {
    console.log[reader.error];
  };

}
9 và Blob2

Đây là một ví dụ về việc đọc một tập tin




function readFile[input] {
  let file = input.files[0];

  let reader = new FileReader[];

  reader.readAsText[file];

  reader.onload = function[] {
    console.log[reader.result];
  };

  reader.onerror = function[] {
    console.log[reader.error];
  };

}

Blob8 cho đốm màu

Như đã đề cập trong chương Blob, Blob8 không chỉ có thể đọc các tệp mà còn bất kỳ đốm màu nào

Chúng ta có thể sử dụng nó để chuyển đổi một đốm màu sang định dạng khác

  • let reader = new FileReader[]; // no arguments
    2 – đến
    let reader = new FileReader[]; // no arguments
    3,
  • let reader = new FileReader[]; // no arguments
    4 – thành chuỗi [thay thế cho Blob3],
  • let reader = new FileReader[]; // no arguments
    6 – đến url dữ liệu base64

Blob5 có sẵn trong Web Worker

Đối với Web Worker, cũng tồn tại một biến thể đồng bộ của Blob8, được gọi là

Các phương thức đọc của nó

let reader = new FileReader[]; // no arguments
8 không tạo ra các sự kiện, mà trả về một kết quả, giống như các hàm thông thường.

Tuy nhiên, điều đó chỉ xảy ra bên trong Công nhân web, vì sự chậm trễ trong các cuộc gọi đồng bộ, có thể xảy ra khi đọc từ tệp, trong Công nhân web ít quan trọng hơn. Chúng không ảnh hưởng đến trang




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 đối tượng kế thừa từ Blob

Ngoài các phương thức và thuộc tính của Blob, các đối tượng




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 còn có các thuộc tính của



function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
4 và lastModified, cùng với khả năng nội bộ để đọc từ hệ thống tệp. Chúng tôi thường nhận được các đối tượng



function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 từ đầu vào của người dùng, chẳng hạn như các sự kiện fileParts5 hoặc Drag’and’Drop [fileParts6]

Blob8 đối tượng có thể đọc từ tệp hoặc đốm màu, ở một trong ba định dạng

  • Chuỗi [
    
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    2]
  • let reader = new FileReader[]; // no arguments
    3 [
    let reader = new FileReader[]; // no arguments
    9]
  • Url dữ liệu, mã hóa base-64 [
    
    
    
    function readFile[input] {
      let file = input.files[0];
    
      let reader = new FileReader[];
    
      reader.readAsText[file];
    
      reader.onload = function[] {
        console.log[reader.result];
      };
    
      reader.onerror = function[] {
        console.log[reader.error];
      };
    
    }
    
    3]

Tuy nhiên, trong nhiều trường hợp, chúng tôi không phải đọc nội dung tệp. Giống như chúng ta đã làm với blobs, chúng ta có thể tạo một url ngắn với




function readFile[input] {
  let file = input.files[0];

  let reader = new FileReader[];

  reader.readAsText[file];

  reader.onload = function[] {
    console.log[reader.result];
  };

  reader.onerror = function[] {
    console.log[reader.error];
  };

}
6 và gán nó cho fileName3 hoặc fileName4. Bằng cách này, tệp có thể được tải xuống hoặc hiển thị dưới dạng hình ảnh, như một phần của canvas, v.v.

Và nếu chúng tôi định gửi một




function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 qua mạng, điều đó cũng dễ dàng. API mạng như fileName6 hoặc fileName7 vốn chấp nhận các đối tượng



function showFile[input] {
  let file = input.files[0];

  alert[`File name: ${file.name}`]; // e.g my.png
  alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1

Làm cách nào để tạo đối tượng tệp từ đường dẫn tệp trong JavaScript?

Để tạo một đối tượng Tệp, hãy sử dụng hàm Tệp hoặc toán tử mới . Hàm tạo chấp nhận tên đường dẫn đầy đủ hoặc một phần và trả về đối tượng mới. Trình tự CRLF cho tệp được đặt trước theo mặc định của hệ thống và mã hóa được đặt trước theo mã hóa hệ thống mặc định.

Làm cách nào để sao chép một đối tượng tệp trong JavaScript?

Phương thức CopyFile[] được sử dụng để sao chép một hoặc nhiều tệp vào một thư mục được chỉ định . Phương thức này nhận ba tham số. Tham số đầu tiên, nguồn, là một chuỗi chỉ định đường dẫn nguồn và tên tệp để sao chép. Tham số thứ hai, đích, là một chuỗi chỉ định đường dẫn đích, tên tệp để sao chép.

Làm cách nào để tạo một tệp mới bằng JavaScript?

Thuật toán .
Step 1 − Create HTML element..
Bước 2 - Nhận nội dung để thêm vào tệp văn bản
Bước 3 - Tạo một đối tượng Blob của nội dung
Step 4 − In the href attribute of the tag, add the blog object URL..
Step 5 − Add the default file name as a value of the 'download' attribute of tag..

Làm cách nào để tạo một đối tượng tệp trong JavaScript từ Blob?

Tạo đốm màu . var blob = new Blob[["Xin chào thế giới"], {loại. "text/plain"}]; Điều này có thể được gọi là 'tạo tệp động' - đơn giản vì một đối tượng giống như tệp đang được tạo khi đang di chuyển.

Chủ Đề