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
随机推荐
- bzoj3157国王奇遇记(秦九韶算法+矩乘)&&bzoj233AC达成
bz第233题,用一种233333333的做法过掉了(为啥我YY出一个算法来就是全网最慢的啊...) 题意:求sigma{(i^m)*(m^i),1<=i<=n},n<=10^9,m ...
- 利用scrapy和MongoDB来开发一个爬虫
今天我们利用scrapy框架来抓取Stack Overflow里面最新的问题(),并且将这些问题保存到MongoDb当中,直接提供给客户进行查询. 安装 在进行今天的任务之前我们需要安装二个框架,分别 ...
- Unity StrangeIoC框架
Unity StrangeIoC框架 http://blog.csdn.net/y1196645376/article/details/52746251
- jQuery导入Eclipse后报错解决方法
使用Eclipse 3.7及以上版本时,工程中加入jquery.min.js文件,发现该文件出现错误提示(红×),但使用Eclipse 3.7以前的版本就不会出现这种提示.是因为Eclips ...
- vim格式化代码实际上就是 "缩进代码", 命令是等号=
vim格式化代码实际上就是 "缩进代码", 命令是等号= 格式化就是 vim 根据 文件的类型, 自动的对代码进行 缩进 缩进的类型有多种, 都是用等号命令: = 全部格式化 : ...
- 神经网络模型及R代码实现
神经网络基本原理 一.神经元模型 图中x1~xn是从其他神经元传来的输入信号,wij表示表示从神经元j到神经元i的连接权值,θ表示一个阈值 ( threshold ),或称为偏置( bias ).则神 ...
- make menuconfig出错，需要安装libncurses5-dev找不到文件的终极解决办法（不必更换源，适用于ubuntu 32位平台）
make menuconfig 错误,显示有curse 字样的文件没有装.用apt-get install 找不到,网上其他的办法说是源的问题,所以又更新了一下源,但是还是不好用,网速慢,更新太慢. ...
- hdu 4946 2014 Multi-University Training Contest 8
Area of Mushroom Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- bzoj1492 斜率优化|cdq分治
#include <stdio.h> #include <bitset> #include <string.h> #include <stack> #i ...
- 转：入门Webpack，看这篇就够了
写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...