這篇其實上一篇要實現(xiàn)的Excel表格上傳的前端代碼

CSS:

/*美化input  type="file"標簽*/
<style>

::-ms-browse, [type='file'] {
    padding: .4em;
    line-height: 20px;
    border: 1px solid #46b8da;
    background: #5bc0de;
    color: #fff;
    border-radius: 3px;
}
::-webkit-file-upload-button {
    padding: .4em;
    line-height: 20px;
    border: 1px solid #46b8da;
    background: #5bc0de;
    color: #fff;
    border-radius: 3px;
}
</style>

HTML：

 <table style="margin: 5px; height: 70px;">
                <tr>
                    <td>
                        <h4>上傳學生教師個人信息</h4>
                    </td>

                </tr>
                <tr>
                    <td><span style="color: #f00">注：請優(yōu)先上傳班級信息再上傳學生、教師信息，上傳格式為Excel</span></td>
                </tr>
                <tr style="height: 10px"></tr>
            </table>
            <form class="form-horizontal" id="uploadForm" enctype="multipart/form-data" @*action="~/Data/ReadExcelToDataTable"*@ >
                <table style="margin: 5px; height: 70px;">
                    <tr>
                        <td>請選擇文件：</td>
                        <td>
                            <input  type="file" id="fileUpload" name="fileUpload">
                        </td>
                        <td>
                            <input class="btn btn-sm btn-info" type="button" value="上傳班級信息" onclick="submitClass();" />

                        </td>
                        <td>
                            <input class="btn btn-sm btn-info" type="button" value="上傳學生信息" onclick="submitStudent();"  style="margin-left:10px" />
                        </td>
                        <td>
                            <input class="btn btn-sm btn-info" type="button" value="上傳教師信息" onclick="submitTeacher();" style="margin-left:10px" />

                        </td>
                    </tr>
                </table>
            </form>

JQ:

function submitTest() {
    var fileName = $("#fileUpload").val();

    var ldot = fileName.lastIndexOf(".");
    var type = fileName.substring(ldot + 1).toLowerCase();
    if (type == "xls" || type == "xlsx") {
        var formData = new FormData($('#uploadForm')[0]);
        $.ajax({
            url: "/Data/UploadingStudent",
            type: "post",
            data: formData,
            processData: false,  // 告訴jQuery不要去處理發(fā)送的數據
            contentType: false,   // 告訴jQuery不要去設置Content-Type請求頭
            success: function (data) {
                alert(data);
                
            },
            error: function (e) {
                alert("上傳錯誤請聯(lián)系系統(tǒng)管理！！");
                //window.clearinterval(timer);
            }
        });
    }
    else {
        alert("請選擇exce表格文件!");
        $("#fileUpload").val("");
        return false;
    }
}