html+css上传文件控件美化
html上传美化:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
<style>
label {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
cursor: pointer;
}
/*隐藏默认样式*/
input[id=file] {
margin-left: -2000px;
height: 0;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<label for="file" id="upFile">上传文件</label>
<input type="file" accept="video/mp4" id="file">
</div>
<div>
<p id="fileName"></p>
<!--<img src="" id="fileImg">-->
</div>
<script>
$("#file").on("change", function () {
//截取路径，获取上传文件名
var urlArr = this.value.split("\\");
if (this && this.files && this.files[0]) {
document.getElementById("fileName").innerHTML = urlArr[urlArr.length - 1];
var fileUrl = URL.createObjectURL(this.files[0]);
//document.getElementById("fileImg").src = fileUrl;
} else {
//兼容IE9以下
document.getElementById("fileName").innerHTML = urlArr[urlArr.length - 1];
//document.getElementById("fileImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
//document.getElementById("fileImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;
}
});
</script>
</body>
</html>
html+css上传文件控件美化的更多相关文章
- 兼容IE浏览器样式的html上传文件控件
最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...
- jquery上传文件控件Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- jQuery上传文件控件Uploadify使用
Uploadify是JQuery的一个上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件等. 首先应下载jQuery和uploadify插件 jQuery下载地址:h ...
- asp.net 页面上传文件控件后台代码Request.Files获取不到
今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...
- ASP.NE 上传文件控件
protected void Button1_Click(object sender, EventArgs e) { //if (Request["id"]==null & ...
- 用JS怎么判断上传文件控件是否未选择文件
页面代码: <form name="form1" action="uploadPosdetailFile.html" method="post& ...
- Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览
1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...
- C#-WebForm-文件上传-FileUpload控件
FileUpload - 选择文件,不能执行上传功能,通过点击按钮实现上传 默认选择类型为所有类型 //<上传>按钮 void Button1_Click(object sender, E ...
- Form_通过FND_FNDFLUPL标准功能上传CSV控件（案例）
2014-06-08 Created By BaoXinjian
随机推荐
- Python迭代器，可迭代对象，生成器
迭代器 迭代器(iterator)有时又称游标(cursor)是程式设计的软件设计模式,可在容器物件(container,例如链表或阵列)上遍访的界面,设计人员无需关心容器物件的内存分配的实现细节. ...
- Windows常用快捷方式
总结了其他常用的快捷方式: Ctrl+C 复制 . Ctrl+V粘贴. Ctrl+X剪切. Delete删除. Alt+Tab 应用程序切换 Ctrl+Alt+Delete Ctrl+shift+E ...
- CSS3 border-image 属性
border-image 属性是一个简写属性,用于设置以下属性: border-image-source 用在边框的图片的路径,默认值none. 如:border-image-source:url(b ...
- logistic regression与SVM
Logistic模型和SVM都是用于二分类,现在大概说一下两者的区别 ① 寻找最优超平面的方法不同 形象点说,Logistic模型找的那个超平面,是尽量让所有点都远离它,而SVM寻找的那个超平面,是只 ...
- css权威指南学习笔记
2016-08-03 1,继承 一般大多数框模型属性都是不能继承的.如:padding .margin .border .background 都不能继承. 继承值,完全没有特殊性.(就是优先级最低) ...
- jdk自带的jvm监测程序
jinfo:可以输出并修改运行时的java 进程的opts. jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号. jstat:一个极强 ...
- Nginx配置(全)
安装 * windows下:直接到官网下载windows下的稳定版本,解压到任意位置即可 * Linux下:一种方式是yum或者sudo apt-get install 另一种是源码编译安装,先安装p ...
- kettle将Excel数据导入oracle
导读 Excel数据导入Oracle数据库的方法: 1.使用PL SQL 工具附带的功能,效率比较低 可参考这篇文章的介绍:http://www.2cto.com/database/201212/17 ...
- virtualbox设置共享文件夹代替sftp同步代码
通常的开发场景: 代码放在virtualbox上运行,本地的IDE通过sftp实现和虚拟机的代码同步. 有 一个不能避免的问题是,当使用git时,如果装在virtualbox端,那么每次virtual ...
- System.InvalidOperationException : 不应有 <Response xmlns=''>。
xml如下: <?xml version="1.0" encoding="UTF-8"?> <Response version="2 ...