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上传文件控件美化的更多相关文章

  1. 兼容IE浏览器样式的html上传文件控件

    最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...

  2. jquery上传文件控件Uploadify

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...

  3. jQuery上传文件控件Uploadify使用

    Uploadify是JQuery的一个上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件等. 首先应下载jQuery和uploadify插件 jQuery下载地址:h ...

  4. asp.net 页面上传文件控件后台代码Request.Files获取不到

    今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...

  5. ASP.NE 上传文件控件

    protected void Button1_Click(object sender, EventArgs e) { //if (Request["id"]==null & ...

  6. 用JS怎么判断上传文件控件是否未选择文件

    页面代码: <form name="form1" action="uploadPosdetailFile.html" method="post& ...

  7. Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

    1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...

  8. C#-WebForm-文件上传-FileUpload控件

    FileUpload - 选择文件,不能执行上传功能,通过点击按钮实现上传 默认选择类型为所有类型 //<上传>按钮 void Button1_Click(object sender, E ...

  9. Form_通过FND_FNDFLUPL标准功能上传CSV控件（案例）

    2014-06-08 Created By BaoXinjian

随机推荐

  1. linux下mnt目录作用

    linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...

  2. JQuery------日期格式转换

    转载: http://www.jb51.net/article/76548.htm 方法: Date.prototype.Format = function (fmt) { //author: mei ...

  3. Pivot Table

    1. Disable menu 'Disable show/hide Field list menu sht.PivotTables().EnableFieldList = False ''scrip ...

  4. Bubble Cup 8 finals F. Bulbo (575F)

    题意: 给定初始位置,查询n次区间,每次查询前可以花费移动距离的代价来移动, 查询时需要花费当前位置到区间内最近的点的距离,求最小代价. 1<=n<=5000,1<=所有位置< ...

  5. 5天揭秘js高级技术-第二天

    一.数组 1. 什么是数组? 数组就是一组数据的集合: 其表现形式就是内存中的一段连续的内存地址: 数组名称其实就是连续内存地址的首地址: 2. 关于js中的数组定义 数组定义无需指定数据类型: 数组 ...

  6. SQL Server数据库SP命令祥解

    1.数据库: (1)sp_helpdb:报告有关指定数据库或所有数据库的信息.例:sp_helpdb   --显示所有数据库信息(名称.大小等)例:sp_helpdb Recruitment   -- ...

  7. 决策树-ID3

    id3:无法直接处理数值型数据,可以通过量化方法将数值型数据处理成标称型数据,但涉及太多特征划分,不建议 决策树:的最大优点在于可以给出数据的内在含义,数据形式非常容易理解: 决策树介绍:决策树分类器 ...

  8. jquery easyui tree动态加载子节点

    1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...

  9. PHP之compact()函数

    PHP之compact()函数 compact()函数将变量转化为数组: <?php //直接调用函数 $a=1;$b=3;$c=4; var_dump($a,$b,$c); //自定义函数实现 ...

  10. Lisp永远成不了编程主流语言

        Lisp语言是第二古老的高级编程语言.许多的黑客和开发者对Lisp推崇备至,Paul Graham甚至说"编程语言现在的发展,不过刚刚赶上1958年Lisp语言的水平". ...