Trình đọc tệp JavaScript

• Tệp (API)

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

    
    

    

    





    
FileReader example
    Reset

    

        Drop one file here
    

    





 

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. 

filereader-input-ví dụ. html

    
    

    





    
FileReader example
    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?