Trình đọc tệp JavaScript

Mục lục

1. Trình đọc tệp
2. Ví dụ với FileReader

• Hướng dẫn về ECMAScript, Javascript

Xem thêm Hướng dẫn

• Hướng dẫn về ECMAScript, Javascript

1. Trình đọc tệp
2. Ví dụ với FileReader

Reset

trình đọc tệp-thả-ví dụ. js

function dropHandler[evt] {
    evt.stopPropagation[];
    evt.preventDefault[];

    // FileList object.
    var files = evt.dataTransfer.files;

    if [files.length != 1] {
        resetLog[];
        appendLog["Please drag and drop 1 file!"];
        return;
    }
    var file = files[0];

    var fileReader = new FileReader[];

    fileReader.onloadstart = function[progressEvent] {
        resetLog[];
        appendLog["onloadstart!"];
        var msg = "File Name: " + file.name + "
" +
            "File Size: " + file.size + "
" +
            "File Type: " + file.type;

        appendLog[msg];
    }

    fileReader.onload = function[progressEvent] {
        appendLog["onload!"];

        var stringData = fileReader.result;
        appendLog[" ---------------- File Content ----------------: "];
        appendLog[stringData];
    }

    fileReader.onloadend = function[progressEvent] {
        appendLog["onloadend!"];
        // FileReader.EMPTY, FileReader.LOADING, FileReader.DONE
        appendLog["readyState = " + fileReader.readyState];
    }

    fileReader.onerror = function[progressEvent] {
        appendLog["onerror!"];
        appendLog["Has Error!"];
    }

    // Read file asynchronously.
    fileReader.readAsText[file, "UTF-8"]; // fileReader.result -> String.
}

function dragoverHandler[evt] {
    evt.stopPropagation[];
    evt.preventDefault[];
    // Explicitly show this is a copy.
    evt.dataTransfer.dropEffect = 'copy';
}

function resetLog[] {
    document.getElementById['log-div'].innerHTML = "";
}

function appendLog[msg] {
    document.getElementById['log-div'].innerHTML += "
" + msg;
}

 

-

For example, users choose a file through the  element. Use FileReader to read the basic information and contents of the file  just selected by the user. 

Reset

filereader-input-ví dụ. js

function changeHandler[evt] {
    evt.stopPropagation[];
    evt.preventDefault[];

    // FileList object.
    var files = evt.target.files;

    var file = files[0];

    var fileReader = new FileReader[];

    fileReader.onloadstart = function[progressEvent] {
        resetLog[];
        appendLog["onloadstart!"];
        var msg = "File Name: " + file.name + "
" +
            "File Size: " + file.size + "
" +
            "File Type: " + file.type;

        appendLog[msg];
    }

    fileReader.onload = function[progressEvent] {
        appendLog["onload!"];
        var stringData = fileReader.result;
        appendLog[" ---------------- File Content ----------------: "];
        appendLog[stringData];
    }

    fileReader.onloadend = function[progressEvent] {
        appendLog["onloadend!"];
        // FileReader.EMPTY, FileReader.LOADING, FileReader.DONE
        appendLog["readyState = " + fileReader.readyState];
    }

    fileReader.onerror = function[progressEvent] {
        appendLog["onerror!"];
        appendLog["Has Error!"];
    }

    // Read file asynchronously.
    fileReader.readAsText[file, "UTF-8"]; // fileReader.result -> String.
}

function resetLog[] {
    document.getElementById['log-div'].innerHTML = "";
}

function appendLog[msg] {
    document.getElementById['log-div'].innerHTML += "
" + msg;
}

 

-

Nếu bạn sử dụng trình đọc tệp. readAsDataURL[blobOrFile], khi kết thúc, fileReader. ví dụ: kết quả sẽ trả về một URL đại diện cho dữ liệu đã đọc

data:application/x-msdownload;base64,TVqQAA.....ACAEA

data:image/png;base64,iVBORw...eYm57Ad6m6uHj96j

Ví dụ. Người dùng chọn một tệp ảnh trên máy tính và sử dụng filerReader. readAsDataURL[file] để đọc tệp vừa được người dùng chọn. Trình đọc tệp. kết quả sẽ trả về một URL. Đặt URL này cho thuộc tính src của phần tử để hiển thị ảnh trên trình duyệt.

Trình đọc tệp JavaScript là gì?

Làm cách nào để đọc nội dung tệp trong JavaScript?

Làm cách nào để mở tệp bằng JavaScript?

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