input type='file'上传控件假样式
采用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" style="float: left;">第三步：从本地选择已保存的Excel文件；</label>
<input type="file" style="float: left; display: none;" id="inputfile" runat="server" />
<div class="input-group" style="float: left; width: 40%; margin-top: -5px;">
<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 style="clear: left; margin-bottom: 15px;"></div>
<div class="form-group">
<label class="control-label" style="float: left;">第四步：点击导入上传文件到系统。</label>
<button type="button" style="float: left; margin-top: -5px;" class="btn btn-default" runat="server" onserverclick="btn_Click" onclick="CheckFile();">导入</button>
<label id="lbl_error" style="float: left;" class="control-label text-danger" runat="server"></label>
</div>
<div style="clear: left;"></div>
<div id="div_error" class="table-responsive" style="display: none;" 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>
input type='file'上传控件假样式的更多相关文章
- input type=file上传控件老问题
// 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框. // 2.如果在手机上使用时,一般不会出现这种较丑的 // 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数 ...
- input type=file 上传文件样式美化（转载）
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- Js获取file上传控件的文件路径总结
总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...
- <input type=file>上传唯一控件
值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- input(type='file')上传多张照片并显示，传到后台
以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!! 1.首先是前端页面代码: 其中,<input type="file" id="file_input&qu ...
- 判断input[type=file]上传文件格式
input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...
- input标签type="file"上传文件的css样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 微信企业号 获取AccessToken
目录 1. AccessToken介绍 2. 示例代码 1. AccessToken介绍 1.1 什么是AccessToken AccessToken即访问凭证,业务服务器每次主动调用企业号接口时需要 ...
- 微软发布正式版SQL Server 2016
微软于今天在SQL 官方博客上宣布 SQL Server 数据库软件的正式发布版本(GA),历时一年多,微软为该软件发布了多个公共预览版和候选版本,而今天最终版本终于上线了.在博客中,微软数据集团的企 ...
- Javascript生成二维码（QR）
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- C# 利用性能计数器监控网络状态
本例是利用C#中的性能计数器(PerformanceCounter)监控网络的状态.并能够直观的展现出来 涉及到的知识点: PerformanceCounter,表示 Windows NT 性能计数器 ...
- Dapper.Contrib：GetAsync<T> only supports an entity with a [Key] or an [ExplicitKey] property
异常处理:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点:Model里面的Table和Key ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- C#基础篇 - 理解委托和事件
1.委托 委托类似于C++中的函数指针(一个指向内存位置的指针).委托是C#中类型安全的,可以订阅一个或多个具有相同签名方法的函数指针.简单理解,委托是一种可以把函数当做参数传递的类型.很多情况下,某 ...
- CSS 特殊属性介绍之 pointer-events
首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target.当未指定该属性时,SVG 内 ...
- iOS开发之多种Cell高度自适应实现方案的UI流畅度分析
本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...
- ASP.NET Core 中文文档 第四章 MVC（4.1）Controllers, Actions 和 Action Results
原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...