采用bootstrap框架樣式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../theme/pc_global.js"></script>
<script src="../../theme/js/layer/layer.js" type="text/javascript"></script>
<style>
.container .form-group { margin-top: 5px; }
</style>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<%-- class="form-inline"--%>
<div class="container">
<div class="form-group">
<label class="control-label">第一步：下載Excel模板到本地；</label>
<button type="button" class="btn btn-default" onclick="DownModule()">下載模板</button>
</div>
<div class="form-group">
<label class="control-label">第二步：按照Excel模板中格式要求編輯學生分數；</label>
</div>
<div class="form-group">
<label class="control-label" >第三步：從本地選擇已保存的Excel文件；</label>
<input type="file" id="inputfile" runat="server" />
<div class="input-group" >
<span class="input-group-btn">
<button type="button" class="btn btn-default" onclick="$('#inputfile').click();">選擇文件</button>
</span>
<input id="txt_inputfile" type="text" class="form-control" readonly="true" />
</div>
</div>
<div ></div>
<div class="form-group">
<label class="control-label" >第四步：點擊導入上傳文件到系統。</label>
<button type="button" class="btn btn-default" runat="server" onserverclick="btn_Click" onclick="CheckFile();">導入</button>
<label id="lbl_error" class="control-label text-danger" runat="server"></label>
</div>
<div ></div>
<div id="div_error" class="table-responsive" runat="server">
<table class="table table-hover table-bordered">
<caption>以下數據導入失敗</caption>
<thead>
<tr>
<th>學號</th>
<th>姓名</th>
<th>分數</th>
<th>錯誤原因</th>
</tr>
</thead>
<tbody id="tbody_trs" runat="server">
</tbody>
</table>
</div>
</div>
<asp:HiddenField ID="HFTClassID" runat="server" />
<asp:HiddenField ID="HidCustomScoreID" runat="server" />
</form>
<script type="text/javascript">
var FrameIndex = parent.layer.getFrameIndex(window.name); //獲取窗口索引
//關閉頁面
function ClosePage() {
parent.layer.close(FrameIndex);
}
</script>
<script type="text/javascript">
//導入
function ExportScoreCustom() {
var tclassid = $("#HFTClassID").val();
var customscoreid = $("#HidCustomScoreID").val();
$.ajax({
//提交數據的類型 POST GET
type: "POST",
//提交的網址
url: "../ScoreAction.ashx",
//提交的數據
data: { "action": "exportscorecustom", "tclassid": tclassid, "customscoreid": customscoreid },
//返回數據的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請求之前調用的函數
beforeSend: function () { },
//成功返回之後調用的函數
success: function (datajson) {
if (datajson != null && typeof (datajson) == "string" && datajson.length > 0) { try { datajson = JSON.parse(datajson); } catch (e) { datajson = eval("(" + datajson + ")"); } }
window.parent.LoadList();
if (datajson.msg < 0) {//導入臨時表失敗
layer.msg(datajson.msgbox);
$("#div_label label").text(datajson.msgbox);
$("#div_error").hide();
} else {
$("#div_label label").text("");
$("#div_error").show();
$("#div_error table tbody").empty();
$(datajson.jsonstr).each(function (index, Row) {
$("#div_error table tbody").append(MyTrHtml(Row));
});
}
},
//調用執行後調用的函數
complete: function (XMLHttpRequest, textStatus) { },
//調用出錯執行的函數
error: function () { }
});
}
function MyTrHtml(Row) {
var errormsg = $("#div_tr_model").html();
errormsg = errormsg.replace(/{IDNO}/g, Row.IDNO)
.replace(/{UserName}/g, Row.UserName)
.replace(/{Score}/g, Row.Score)
.replace(/{ErrorReason}/g, Row.ErrorReason);
return errormsg;
}
//下載模板
function DownModule() {
parent.window.open("http://" + window.location.host + "/_Score/自定義成績模板.xls");
}
//點擊導入
function CheckFile() {
if ($("#inputfile").val() == "") {
$("#txt_inputfile").val("未選擇任何文件");
return false;
} else {
return true;
}
}
//上傳文件-確定
$('#inputfile').change(function () {
var str = $(this).val();
var arr = str.split('\\');//注split可以用字符或字符串分割
var my = arr[arr.length - 1];//這就是要取得的圖片名稱
$("#txt_inputfile").val(my);
})
</script>
</body>
</html>
