Làm cách nào để bạn tham chiếu các tệp cục bộ trong html?

As the applications we build with web technologies aspire to match up to native apps, one area where the browser remains challenged is in its access to files on the user's system. Browsers have, for many years, allowed users to select files to upload to a server in HTML form with .

Nhưng nội dung của các tệp này luôn bị ẩn khỏi bất kỳ JavaScript nào đang chạy trong trình duyệt. Nếu chúng tôi muốn phát các tệp video hoặc chỉnh sửa hình ảnh trên hệ thống cục bộ của người dùng, trước tiên chúng tôi cần tải tệp lên máy chủ

Nếu chúng tôi có thể đọc nội dung của các tệp này, chúng tôi có thể ít phụ thuộc vào chức năng phía máy chủ hơn. Rất may, với HTML5, giờ đây chúng ta có thể đọc các tệp từ hệ thống tệp cục bộ. Điều này có nghĩa là chúng tôi có thể tạo các ứng dụng hoạt động tốt hơn khi ngoại tuyến

• Để khám phá một số plugin, hãy xem hướng dẫn của chúng tôi về API JavaScript, API HTML và API Google tốt nhất

Phần tử đầu vào HTML của type="file" cho phép người dùng chọn một hoặc nhiều tệp từ hệ thống tệp cục bộ. Trước HTML5, mục đích của đầu vào tệp chỉ là để cho phép người dùng chọn các tệp sẽ được tải lên thông qua một biểu mẫu. Trong HTML5, các phần tử đầu vào của loại = "tệp" hiện cung cấp cho nhà phát triển quyền truy cập vào siêu dữ liệu về các tệp đã chọn. tên tệp, ngày sửa đổi lần cuối và kích thước tệp tính bằng byte

Nếu chúng tôi muốn người dùng có thể chọn nhiều tệp cùng một lúc, chúng tôi cần cung cấp cho đầu vào một thuộc tính nhiều. Sau đó, chúng tôi sẽ tạo một trình xử lý sự kiện thay đổi cho đầu vào tệp của chúng tôi (chúng tôi sẽ đặt ID tệpChooser này), được gọi khi giá trị của đầu vào tệp thay đổi

document.querySelector("#fileChooser").addEventListener
('change',filesChosen, false)

Khi người dùng chọn một tệp có đầu vào tệp, trình xử lý sự kiện của chúng tôi được gọi và nhận sự kiện làm đối số. Thuộc tính mục tiêu của sự kiện là tệp đầu vào. Điều này có một tệp thuộc tính, là một mảng giống như đối tượng FileList, chứa các đối tượng tệp được người dùng chọn. Ngay cả khi chúng tôi chưa đặt thuộc tính nhiều cho đầu vào của mình, thì thuộc tính tệp vẫn là Danh sách tệp, chỉ chứa một mục duy nhất

Lấy dữ liệu

Bây giờ chúng ta có thể lặp lại FileList, làm việc lần lượt với từng tệp đã chọn và lấy tên, kích thước và ngày sửa đổi lần cuối của nó

function filesChosen(evt){
var chosenFile = evt.target.files[0]; //get the first file in the FileList
var fileName = chosenFile.name; //the name of the file as a string
var fileSize = chosenFile.size; //the size of the file in bytes, as an integer
var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object
}

Chúng ta có thể sử dụng chúng như thế nào? . Hoặc, trước khi tải lên, chúng tôi có thể xác định những tệp có thể mất nhiều thời gian để tải lên do kích thước của chúng và cảnh báo người dùng

Tuy nhiên thông tin này vẫn còn khá hạn chế. May mắn thay, HTML5 cũng cung cấp cách đọc nội dung của tệp

Đọc tập tin

Đối tượng FileReader cho phép chúng tôi đọc nội dung của tệp sau khi chúng tôi nhận được tệp từ người dùng. Để bảo mật, người dùng phải chủ động cung cấp cho chúng tôi tham chiếu đến tệp để có thể đọc được. Có một số phương pháp FileReader để lấy nội dung của tệp

• readAsDataURL(tệp). Trả về nội dung của tệp dưới dạng dataURL, có thể được sử dụng làm src của phần tử img hoặc hình ảnh trong biểu định kiểu
• readAsText(tệp [,mã hóa]). Đọc tệp dưới dạng chuỗi, với mã hóa tùy chọn đã cho (UTF-8 mặc định)
• readAsArrayBuffer(tệp). Đọc nội dung của tệp dưới dạng ArrayBuffer

Vì JavaScript là một luồng và các tệp có thể có dung lượng lớn nên các phương thức đọc của FileReader không đồng bộ. Điều này cũng có nghĩa là nhiều tệp có thể được đọc đồng thời. Chúng tôi có thể dừng đọc tệp trong khi nó đang được xử lý bằng FileReader. Huỷ bỏ(). Vì các phương thức này không đồng bộ, thay vì đặt giá trị của một biến thành kết quả của phương thức, chúng ta cần lắng nghe các sự kiện được gửi đến đối tượng FileReader

Một trong những sự kiện mà FileReader nhận được tải khi tệp chúng tôi muốn đã được đọc. Thuộc tính mục tiêu của sự kiện này là chính FileReader – thuộc tính này có thuộc tính được gọi là kết quả, nơi chứa nội dung của tệp đã đọc. Đây là cách chúng tôi lấy dataURL cho nội dung của tệp

var reader = new FileReader();
//create our FileReader object to read the file

reader.addEventListener("load", fileRead, false);
//add an event listener for the onloaded event

function fileRead(event){
//called when the load event fires on the FileReader

var pictureURL = event.target.result;
//the target of the event is the FileReader object instance
//the result property of the FileReader contains the file contents
}

reader.readAsDataURL(file);
//when the file is loaded, fileRead will be called

Chúng tôi thêm trình xử lý sự kiện cho sự kiện tải và trong trình xử lý cho sự kiện này, chúng tôi nhận được mục tiêu. kết quả, là giá trị của thao tác FileReader (vì vậy, DataURL, chuỗi hoặc arrayBuffer, tùy thuộc vào thao tác mà chúng tôi đã yêu cầu FileReader thực hiện)

Chúng tôi có thể lắng nghe bất kỳ sự kiện nào sau đây trên đối tượng FileReader

• bắt đầu tải. Khi FileReader bắt đầu đọc tệp
• phát triển. Không liên tục trong khi tệp đang tải
• Huỷ bỏ. Khi quá trình đọc tệp bị hủy bỏ
• trọng tải. Khi đọc hoàn tất thành công
• phụ tải. Khi tệp đã được tải hoặc đọc không thành công

Nếu đọc thành công, cả sự kiện tải và tải đều được kích hoạt. Nếu không thành công, các sự kiện lỗi và tải sẽ được kích hoạt

Đặt nó lại với nhau

Chúng tôi sẽ cho phép người dùng chọn một tệp hình ảnh, sau đó hiển thị nó dưới dạng hình thu nhỏ. Đầu tiên, yếu tố đầu vào của chúng tôi

and we add an event listener for when the input changes
document.querySelector("#chooseThumbnail").addEvent
Listener('change',showThumbNail, false)

Khi người dùng thực hiện lựa chọn, chúng tôi gọi hàm showThumbNail(). Trong HTML5, chúng tôi có thể sử dụng accept='image/*' để chấp nhận bất kỳ loại hình ảnh nào. Mục tiêu của sự kiện là phần tử đầu vào có tệp thuộc tính (đối tượng giống như mảng được gọi là FileList). Chúng tôi lấy phần tử đầu tiên trong FileList và đọc nó

function showThumbNail(evt){
var url;
var file;
file = evt.target.files[0];
reader = new FileReader();
//we need to instantiate a new FileReader object
reader.addEventListener("load", readThumbNail, false);
//we add an event listener for when a file is loaded by the FileReader
//this will call our function 'readThumbNail()'

reader.readAsDataURL(file);
//we now read the data
}
function readThumbNail(event) {
//this is our callback for when the load event is sent to the FileReader
var thumbnail = document.querySelector("#thumbnail");

thumbnail.src = event.target.result;
//the event has a target property, the FileReader with a property 'result',
//which is where the value we read is located
}

URL cho tệp

Thông thường, khi chúng tôi truy cập một tệp cục bộ, chúng tôi sẽ không thực sự muốn sử dụng nội dung của nó trực tiếp mà sử dụng tệp cho một số mục đích khác. Ví dụ: nếu đó là tệp hình ảnh, chúng tôi có thể muốn hiển thị hình ảnh;

Một trường hợp cụ thể đang hiển thị luồng video trong phần tử video, khi làm việc với getUserMedia. Cách đơn giản nhất để thực hiện việc này là lấy một URL tạm thời, ẩn danh từ trình duyệt để sử dụng như bất kỳ URL nào khác – ví dụ như giá trị của thuộc tính src hình ảnh. Trong API tệp HTML5, đối tượng cửa sổ có thuộc tính URL. Cái này có hai phương pháp

• tạoObjectURL. Tạo một URL cho một tập tin nhất định
• thu hồiObjectURL. Hủy tham chiếu giữa URL và tệp

Chúng tôi không thể lưu trữ một URL được tạo theo cách này trong localStorage, sau đó sử dụng lại nó trong một cửa sổ khác, vì nó chỉ tồn tại trong vòng đời của tài liệu trong khi cửa sổ tạo ra nó đang mở

Đây là cách chúng tôi có thể sử dụng điều này, kết hợp với đầu vào của loại tệp để lấy hình ảnh từ hệ thống tệp cục bộ và hiển thị dưới dạng hình thu nhỏ. Yếu tố đầu vào chính xác như trước

and here's the JavaScript
function showThumbNail(evt){

var url;
var file;

var thumbnail = document.querySelector("#thumbnail");
//this is the image element where we'll display the thumbnail

file = evt.target.files[0];
//because there's no 'multiple' attribute set on the input
//users can only select one
//we'd want to check this is the right sort of file

url = window.URL.createObjectURL(file);
//we create our URL (for WebKit browsers we need webkitURL.createObjectURL)
thumbnail.src = url;
//we give our thumbnail image element this URL as its source

}

Đã được thực hiện. Không cần phải lo lắng về các chức năng đọc hoặc gọi lại tệp không đồng bộ. Khi chúng tôi chỉ muốn sử dụng một tệp và không đọc nội dung của nó, thì đây là giải pháp ưa thích cho đến nay

kết thúc

API tệp đưa trình duyệt đến gần hơn với hệ thống tệp gốc, cho phép người dùng phát, xem và chỉnh sửa nội dung từ hệ thống cục bộ của họ trực tiếp trong trình duyệt mà không cần gửi chúng đến máy chủ

Nó thậm chí còn cho phép chúng tôi truy cập vào máy ảnh và chụp ảnh bằng cách sử dụng chụp=máy ảnh như một phần của giá trị thuộc tính loại. Tuy nhiên, chúng tôi vẫn sẽ đợi một thời gian (rất có thể là mãi mãi) để có toàn quyền truy cập vào hệ thống tệp gốc

Tệp cục bộ HTML là gì?

Làm cách nào để hiển thị hình ảnh từ thư mục trong HTML?

Cách lấy đường dẫn hình ảnh cục bộ trong javascript?

div = $('

'); img = $('', { 'src': URL. createObjectURL(this. files[0]) }).