Đối tượng FileReader

Tìm hiểu đối tượng FileReader là gì và cách sử dụng nó

CácFileReaderđối tượng đọc không đồng bộ nội dung của tệp.

Nó chỉ ra 4 phương pháp đọc mà chúng ta có thể sử dụng để bắt đầu quá trình đọc:

  • readAsText()
  • readAsDataURL()
  • readAsArrayBuffer()
  • readAsBinaryString()

và mộtabort()phương pháp để tạm dừng bất kỳ thao tác đọc nào.

Việc đọc tệp là không đồng bộ và đối tượng hiển thị một số sự kiện mà chúng ta có thể kết nối để theo dõi tiến trình của hoạt động:

  • onloadđược kích hoạt khi quá trình đọc kết thúc thành công
  • onloadstartđược kích hoạt khi bắt đầu đọc
  • onprogressđược kích hoạt khi quá trình đọc đang diễn ra
  • onloadendđược kích hoạt khi quá trình đọc kết thúc, thành công hoặc không thành công
  • onerrorđược kích hoạt khi xảy ra lỗi
  • onabortđược kích hoạt khi quá trình đọc bị hủy bỏ

Sau khi hoàn tất thao tác đọc,resultthuộc tính của FileReader chứa nội dung tệp.

Cácerrorthuộc tính chứa thông báo lỗi, nếu xảy ra lỗi vàreadyStatechứa trạng thái của các hoạt động -0nếu không có dữ liệu nào được tải,1nếu quá trình tải dữ liệu đang diễn ra và2nếu quá trình tải đã kết thúc.

readAsText()

Tải nội dung của mộtbãitrong một chuỗi văn bản.

Trong ví dụ này, chúng tôi sử dụng văn bản đó và đặt nó vào#contentHTML bên trong của phần tử:

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
const text = reader.result
document.getElementById(‘content’).innerHTML = text
}


reader.onerror = (e) => {
console.error(e)
}


reader.readAsText(file)

Đây là một ví dụ đọc nội dung của một tệp văn bản khi nó được tải lên bằng cách sử dụnginputvà in nội dung của nó vào bảng điều khiển:

<input type="file" allow="text/*" />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => {
const reader = new FileReader()


<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">event</span> =&gt; {
  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">result</span>
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">text</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onerror</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#a6e22e">e</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">readAsText</span>(<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>])

})

readAsDataURL()

Tải nội dung của một đốm màu vào mộtURL dữ liệu.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
const dataURL = event.target.result
document.getElementById(‘image’).src = dataURL
}


reader.readAsDataURL(file)

readAsArrayBuffer()

Tải nội dung của một blob vào mộtArrayBuffer.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
const buffer = reader.result
const data = new Int32Array(buffer)
//…
}


reader.onerror = (e) => {
console.error(e)
}


reader.readAsArrayBuffer(file)

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt:


Công nghệ Wiki trực tuyến!