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. H5+CSS3知识点

    概要:CSS3美化样式.自定义字体图标.滤镜设置.CSS3选择器.transform2D转换.新增表单控件.vaild表单验证.表单样式美化等. 属性选择器: E[attr]只使用属性名,但没有确定任 ...

  2. FlumeNG 笔记

    环境:CentOS6.6 64位 + FlumeNG 1.6 请参考推荐文档: Flume-ng的原理和使用 - JunezChen Blog - SegmentFault  https://segm ...

  3. jquery 杂记

    返回指定属性名的属性值:getAttribute() 设置元素的属性值:attr('src',voiceurl) form表单: 序列化表单值: $('#formid').serialize()   ...

  4. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  5. ruby 基础知识三 读写文件

    1.File 中参数的含义 r 只读模式.文件指针被放置在文件的开头.这是默认模式. r+ 读写模式.文件指针被放置在文件的开头. w 只写模式.如果文件存在,则重写文件.如果文件不存在,则创建一个新 ...

  6. 如何修改geditor的配置文件 -好像geditor没有文本格式的配置文件? 要使用dconf-editor来配置- geditor自己配置编码格式

    好像geditor没有文本格式的配置文件? 好像是通过一个程序, 叫 dconf-editor 来配置geditor的? 以前是通过gconf-editor来配置的, 但是gconf-editor的配 ...

  7. 【转载】跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    跟随 Web 标准探究DOM -- Node 与 Element 的遍历 这个是 Joyee 2014年更新的,可能是转战github缘故,一年多没有跟新了.这篇感觉还挺全面,就转载过来,如以前文章一 ...

  8. CSS常用技术总结！~~

    //放大屏幕,背景图不变 background: url(x.png) no-repeat 0 0; background-image: -webkit-image-set(url(logo_db.p ...

  9. C#对于文件的读写

    C#文件的读写操作 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// 写入txt文件 /// </summary> ...

  10. R自动数据收集第二章HTML笔记1(主要关于handler处理器函数和帮助文档所有示例)

    本文知识点:     1潜在畸形页面使用htmlTreeParse函数 2startElement的用法 3闭包 4handler函数的命令和函数体主要写法 5节点的丢弃,取出,取出标签名称.属性.属 ...