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

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 += '<thead>';
                table += '<tr>';
                footer += '<tfoot>';
                footer += '<tr>';
            } else {
                table += '<tr>';
            }
            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 += '<th>';
                        table += rowCells[rowCell];
                        table += '</th>';
                        footer += '<th>';
                        footer += rowCells[rowCell];
                        footer += '</th>';
                    }
                } else {
                    if (urlCol === rowCell) {
                        continue;
                    }
                    if (urlCol !== (0 | -1)) {
                        if (rowCell === 0) {
                            table += '<td>';
                            table += "<a target='_blank' href='" + rowCells[urlCol] + "'>";
                            table += rowCells[rowCell];
                            table += "</a>";
                            table += '</td>';
                        } else {
                            table += '<td>';
                            table += rowCells[rowCell];
                            table += '</td>';
                        }
                    } else if (urlCol === -1) {
                        table += '<td>';
                        table += rowCells[rowCell];
                        table += '</td>';
                    } else {
                        if (rowCell === 1) {
                            table += '<td>';
                            table += "<a target='_blank' href='" + rowCells[urlCol] + "'>";
                            table += rowCells[rowCell];
                            table += "</a>";
                            table += '</td>';
                        } else {
                            table += '<td>';
                            table += rowCells[rowCell];
                            table += '</td>';
                        }
                    }
                }
            }
            if (singleRow === 0) {
                table += '</tr>';
                table += '</thead>';
                table += '<tbody>';
                footer += '</tr>';
                footer += '</tfoot>';
            } else {
                table += '</tr>';
            }
        }
        table += '</tbody>';
        table += footer;
        $('#data_frame').append(table);
    }
}

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

html:

<select id="code-type" title="请选择文本的编码格式" onchange="trans_code()">
                                <option selected value="utf-8">utf-8</option>
                                <option value="utf-16">utf-16</option>
                                <option value="gbk">gbk</option>
                                <option value="gb2312">gb2312</option>
                                <option value="gb18030">gb18030</option>
                                <option value="ascii">ascii</option>
                                <option value="iso-8859-1">iso-8859-1</option>
                            </select>




<li class="nav-item">
                            <a class="nav-link" href="#" onclick="uploadFile()"><i
                                    class="fas fa-fw fa-file"></i>上传文件</a>
                            <input type="file"
                                   accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,text/plain,"
                                   id="uploadFile" onchange="upload(this)" hidden>
                        </li>