Hướng dẫn filereader javascript

Reset

filereader-drop-example.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;
}

 

-

Ví dụ, người dùng chọn một tập tin thông qua phần tử . Sử dụng FileReader để đọc thông tin cơ bản và nội dung của tập tin mà người dùng vừa lựa chọn.

Reset

filereader-input-example.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 phương thức fileReader.readAsDataURL[blobOrFile], một khi hoàn thành, fileReader.result sẽ trả về một URL đại diện cho dữ liệu đã đọc được, chẳng hạn:

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

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

Ví dụ: Người dùng lựa chọn một tập tin hình ảnh trên máy tính, sử dụng phương thức filerReader.readAsDataURL[file] để đọc tập tin mà người dùng vừa lựa chọn. fileReader.result sẽ trả về một URL. Sét đặt URL này cho thuộc tính [attribute] src của phần tử

    FileReader Example
    

    





    
Select Image to Show

    

    



    





 

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

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

    var file = files[0];

    var fileReader = new FileReader[];


    fileReader.onload = function[progressEvent] {
        var url = fileReader.result;

        // Something like: data:image/png;base64,iVBORw...Ym57Ad6m6uHj96js
        console.log[url];
        //
        var myImg = document.getElementById["myimage"];
        myImg.src= url;
    }


    // Read file asynchronously.
    fileReader.readAsDataURL[file]; // fileReader.result -> URL.
}