纯前端实现文件上传并读取展示到页面

js代码：

function uploadFile() {
    $("#uploadFile").click();
}

function upload(input) {

    //支持chrome IE10
    if (window.FileReader) {
        var code_type = $("#code-type").val();

        var file = input.files[0];
        if (file !== undefined) {
            filename = file.name.split(".")[0];
            var reader = new FileReader();
            reader.onload = function () {
                // console.log(this.result);
                handle_data(trim(this.result));
            }
            reader.readAsText(file, code_type);
        }
    }

    //支持IE 7 8 9 10
    else if (typeof window.ActiveXObject != 'undefined') {
        var xmlDoc;
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.load(input.value);
        alert(xmlDoc.xml);
    }
    //支持FF
    else if (document.implementation && document.implementation.createDocument) {
        var xmlDoc;
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.async = false;
        xmlDoc.load(input.value);
        alert(xmlDoc.xml);
    } else {
        alert('error');
    }
}

function trans_code() {
    $("#uploadFile").val(undefined);
}

function handle_data(data) {
    var file_type = $("#uploadFile").val().split('.');
    file_type = file_type[file_type.length - 1];
    file_type = file_type.toLocaleLowerCase();
    if (file_type === "csv") {
        var allRows = data.split(/\r?\n|\r/);
        var table = "";
        var footer = "";
        var urlCol = -1;
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
            if (singleRow === 0) {
                table += '';
                table += '';
                footer += '';
                footer += '';
            } else {
                table += '';
            }
            var rowCells = allRows[singleRow].split(',');
            for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
                if (singleRow === 0) {
                    if (rowCells[rowCell].toLocaleLowerCase() === "url") {
                        urlCol = rowCell;//拿到对应的url列
                    } else {
                        table += '';
                        table += rowCells[rowCell];
                        table += '';
                        footer += '';
                        footer += rowCells[rowCell];
                        footer += '';
                    }
                } else {
                    if (urlCol === rowCell) {
                        continue;
                    }
                    if (urlCol !== (0 | -1)) {
                        if (rowCell === 0) {
                            table += '';
                            table += "";
                            table += rowCells[rowCell];
                            table += "";
                            table += '';
                        } else {
                            table += '';
                            table += rowCells[rowCell];
                            table += '';
                        }
                    } else if (urlCol === -1) {
                        table += '';
                        table += rowCells[rowCell];
                        table += '';
                    } else {
                        if (rowCell === 1) {
                            table += '';
                            table += "";
                            table += rowCells[rowCell];
                            table += "";
                            table += '';
                        } else {
                            table += '';
                            table += rowCells[rowCell];
                            table += '';
                        }
                    }
                }
            }
            if (singleRow === 0) {
                table += '';
                table += '';
                table += '';
                footer += '';
                footer += '';
            } else {
                table += '';
            }
        }
        table += '';
        table += footer;
        $('#data_frame').append(table);
    }
}

function trim(str) { //删除左右两端的空格
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

html:

                                utf-8
                                utf-16
                                gbk
                                gb2312
                                gb18030
                                ascii
                                iso-8859-1
                            





                            上传文件