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
随机推荐
- iOS 打包 测试 发布
1.企业版 1.1 打包 1.1.1 使用apple企业账号 获取 证书cer,描述文件provision (开发 生产) *注: 描述文件 又 三者组成(cer + appId + bundleId ...
- django文件上传和序列化
django实现文件上传 使用form表单上传文件 html页面 <html lang="en"> <head> <meta charset=&quo ...
- oracle--函数--bai
--1 没有入参的函数.返回字符串 create or replace function get_time return varchar2 as v_time varchar2(20); --声明1个 ...
- Html中自定义鼠标的形状
Html中自定义鼠标的形状 <html> <head> <title>自定义的鼠标形状</title> <meta http-equiv=&quo ...
- 总结libevent安装方法
1.先用:ls -al /usr/lib | grep libevent 查看是否已安装,如果已安装且版本低于1.3,则先通过:rpm -e libevent -nodeps 进行卸载. 2.下载l ...
- HTTP压力测试工具
HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用的资源导致了在配置不高的P ...
- TinyFox/Jexus如何正确使用配置文件
一.阅读须知 1.TinyFox是什么 Tinyfox3.x 将支持多站点多域名 2.Jexus是什么 二.使用问题解答 * 问题1.发布Owin项目到Win/Centos系统下的TinyFox上时, ...
- 把代码搬到Git Hub 吧（一）
作为码农的我们,应该都是知道Git Hub,因为git几乎是码农必备的技能啊,所以就不多介绍Git Hub了,直入主题,这篇博客主要讲解Git Hub网页端和客户端的操作. 网页端: 首页第一步自然是 ...
- java发送 email
public class EmailUtils implements IAction { private static Logger logger = Logger.getLogger(EmailUt ...
- WinForm下增加声音提示
在WinForm平台下播放声音,一般有两种方式:第一种是调用系统自带声音: [代码] 申明定义: [DllImport("kernel32.dll")] public static ...