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. 后进先出 stack、 先进先出Queue

    using System; using System.Collections; using System.Collections.Generic; using System.ComponentMode ...

  2. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  3. python的错误和异常

    python错误和异常 错误 错误分为语法错误和逻辑错误 语法错误 >>> if File "<stdin>", line 1 if ^ Syntax ...

  4. Python Day12

    MySQL 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们 ...

  5. JAVA中ListIterator和Iterator详解与辨析

    在使用Java集 合的时候,都需要使用Iterator.但是java集合中还有一个迭代器ListIterator,在使用List.ArrayList. LinkedList和Vector的时候可以使用 ...

  6. 使用MyEclipse 9.0 创建 struts2 的HelloWorld 工程

    作为眼高手低的典范,必须痛改前非,好好动手多做开发! 本文是struts2的入门指导,权当笔记! 在MyEclipse中,配置Apache tomcat 7.x 服务器 创建新的Web project ...

  7. SVN发布网站

    1.问题 2.分析 如果机器先安装.NET framework,后安装IIS就会出现此问题,原因是.NET framework未注册. 3.注册.NET framework

  8. 【bzoj4721】[Noip2016]蚯蚓

    题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓.蛐 ...

  9. SQL Server中查询数据库及表的信息语句

    /* -- 本文件主要是汇总了 Microsoft SQL Server 中有关数据库与表的相关信息查询语句. -- 下面的查询语句中一般给出两种查询方法, -- A方法访问系统表,适应于SQL 20 ...

  10. Array的个人总结

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...