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 让程序在后台运行的几种可靠方法

    我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终端窗口/网络断开 ...

  2. shell命令find

    概述 find命令的工作方式:沿着文件层次结构向下遍历,匹配符合条件的文件,并执行相应的操作. 选项 -print:指明打印出匹配文件的文件名(路径).当使用-print时,'\n'作为用于分隔文件的 ...

  3. linux安装php

    接上篇:linux安装apache 一.安装php 先安装libxml2库 [root@ctxsdhy package]# yum -y install libxml2-devel 最新地址在:htt ...

  4. 10 Symbol

    Symbol 书中讲了2部分. Symbol() Symbol 属性值. 完全两种画风的东西. 1. Symbol 首先他是一种全新的值. 不属于以前的任何一种 ES6引入了一种新的原始数据类型Sym ...

  5. php二维数组相同id的数量相加

    数组样式 $arr = array( array( , , , ), array( , , , ), array( , , , ), array( , , , ), ); 处理办法 $item=arr ...

  6. PowerShell Notes

    1.  概要 - PowerShell 是cmdlet(command-let)的指令集合,类似unix的bash. - IDE: Windows PowerShell ISE,不区分大小写,可以用命 ...

  7. Bubble Cup 8 finals I. Robots protection (575I)

    题意: 有一个正方形区域, 要求支持两个操作: 1.放置三角形,给定放置方向(有4个方向,直角边与坐标轴平行),直角顶点坐标,边长 2.查询一个点被覆盖了多少次 1<=正方形区域边长n<= ...

  8. Oracle修改字段类型方法总结

    有一个表名为tb,字段段名为name,数据类型nchar(20). 1.假设字段数据为空,则不管改为什么字段类型,可以直接执行:alter table tb modify (name nvarchar ...

  9. Git 分支管理和冲突解决

    Git 分支管理和冲突解决 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支 ...

  10. Markdown段落首行缩进的实现办法

    添加: