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
随机推荐
- Java数据结构——平衡二叉树的平衡因子（转自牛客网）
若向平衡二叉树中插入一个新结点后破坏了平衡二叉树的平衡性.首先要找出插入新结点后失去平衡的最小子树根结点的指针.然后再调整这个子树中有关结点之间的链接关系,使之成为新的平衡子树.当失去平衡的最小子树被 ...
- java中数组的基本知识
数组{ 物以类聚 人以群分 avg sum 数组 数组的概念[ 数组:一组具有相同数据类型的集合 ] 数组的语法[ 先声明 后使用 声明数组: 数据类型+[]+ 变量名 ;/ 数据类型+变量名 +[] ...
- SQL Server性能计数器收集汇总方案（Reporting Service）
通过收集计数器信息,并将计数器信息汇总为不同粒度存储,以Reporting Service报表服务器显示.以下是计数器收集汇总的基本架构. 笔者需要收集的SQL Server计数器包括:SQL Ser ...
- for和foreace的区别
foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本,但是foreach语句并不能完全取代for语 ...
- [从产品角度学EXCEL 01]-EXCEL是怎样运作的
这是<从产品角度学EXCEL>系列第二篇. 前言请看:从产品角度学EXCEL-系列0-为什么要关注EXCEL的本质 本文不接受无授权转载,如需转载,请先联系我,非常感谢. 1.EXCEL是 ...
- sessionState详解
asp.net Session的默认时间设置是20分钟,即超过20分钟后,服务器会自动放弃Session信息. 当我们在asp.net程序中打开web.config的时候,可以看到一段如下的代码: A ...
- hdu 4481 Time travel(高斯求期望)(转)
(转)http://blog.csdn.net/u013081425/article/details/39240021 http://acm.hdu.edu.cn/showproblem.php?pi ...
- jq添加数组
var array=new Array(); array.push(值); //向数组中添加值 array.shift(值);//向数组中移除值
- laravel数据库迁移(三)
laravel号称世界上最好的框架,数据库迁移算上一个,在这里先简单入个门: laravel很强大,它把表中的操作写成了migrations迁移文件,然后可以直接通过迁移文件来操作表.所以 , 数据迁 ...
- 一些js
//fixed块随滚动条滚动 window.onscroll=function(){ var scroll_left = $(window).scrollLeft(); $('#table_fixed ...