这篇其实上一篇要实现的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">注:请优先上传班级信息再上传学生、教师信息,上传格式为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不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
alert(data);
},
error: function (e) {
alert("上传错误请联系系统管理!!");
//window.clearinterval(timer);
}
});
}
else {
alert("请选择exce表格文件!");
$("#fileUpload").val("");
return false;
}
}
网友评论