javascript - fileReader 输入更改 JQuery

Question

我正在尝试使用 JQuery 上的 fileReader 方法和 change 事件读取文件。但由于某种原因它不起作用。

http://jsfiddle.net/vnrcdn1q/13/

我做错了什么？

$(document).ready(function(){
    $('input').on('change', function(e){

        var r = new FileReader();
        r.onload = function(e){
            console.log(r.result);
        };
    });
});

Answer 1

你能试试这个吗？您没有调用 r.readAsText，这就是您的 onload 函数没有被触发的原因。

$(document).ready(function(){
    $('input').on('change', function(evt){
        var f = evt.target.files[0]; 
        if (f){
        var r = new FileReader();
        r.onload = function(e){          
            console.log(e.target.result);
        };
            r.readAsText(f);
        } else 
        {
            console.log("failed");
        }
    });
});

http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=wZLjbp74Xxk

除了 readAsText 之外，您还可以使用其他方法，具体取决于您希望如何读取上传的文件。

FileReader.readAsArrayBuffer()

Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file's data.

FileReader.readAsBinaryString()

Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.

FileReader.readAsDataURL()

Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.

FileReader.readAsText()

Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

(来源:https://developer.mozilla.org/en/docs/Web/API/FileReader)