html上传美化:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>上传文件</title>
  6.     <style>
  7.         label {
  8.             position: relative;
  9.             display: inline-block;
  10.             background: #D0EEFF;
  11.             border: 1px solid #99D3F5;
  12.             border-radius: 4px;
  13.             padding: 4px 12px;
  14.             overflow: hidden;
  15.             color: #1E88C7;
  16.             text-decoration: none;
  17.             text-indent: 0;
  18.             line-height: 20px;
  19.             cursor: pointer;
  20.         }
  21.         /*隐藏默认样式*/
  22.         input[id=file] {
  23.             margin-left: -2000px;
  24.             height: 0;
  25.         }
  26.     </style>
  27.     <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  28.     <!--[if lt IE 9]>
  29.       <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  30.       <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  31.     <![endif]-->
  32. </head>
  33. <body>
  34.     <div>
  35.         <label for="file" id="upFile">上传文件</label>
  36.         <input type="file" accept="video/mp4" id="file">
  37.     </div>
  38.     <div>
  39.         <p id="fileName"></p>
  40.         <!--<img src="" id="fileImg">-->
  41.     </div>
  42.     <script>
  43.         $("#file").on("change", function () {
  44.             //截取路径，获取上传文件名
  45.             var urlArr = this.value.split("\\");
  46.             if (this && this.files && this.files[0]) {
  47.                 document.getElementById("fileName").innerHTML = urlArr[urlArr.length - 1];
  48.                 var fileUrl = URL.createObjectURL(this.files[0]);
  49.                 //document.getElementById("fileImg").src = fileUrl;
  50.             } else {
  51.                 //兼容IE9以下
  52.                 document.getElementById("fileName").innerHTML = urlArr[urlArr.length - 1];
  53.                 //document.getElementById("fileImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  54.                 //document.getElementById("fileImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;
  55.             }
  56.         });
  57.     </script>
  58. </body>
  59. </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. css-css权威指南学习笔记7

    第11章 表布局 1.border-spacing,单元格边框间距,可以有两个或一个值,两个值前者表示水平间距,后者垂直间距. 2.border-collapse值为collapse时不可设置padd ...

  2. 架构师养成记--9.future模式讲解

    什么是future模式呢?解释这个概念之前我们先来了解一个场景吧,财务系统的结账功能,这个功能可能是每个月用一次,在这一个月中相关的数据量已经积累得非常大,这一个功能需要调用好几个存储过程来完成.假如 ...

  3. ubuntu10.04编译安装LAMP

    ubuntu10.04编译安装LAMP以及简单wordpress的使用 : http://linuxme.blog.51cto.com/1850814/971631 一.源码安装LAMP 网上有一堆关 ...

  4. HD3033I love sneakers!(分组背包+不懂)

    I love sneakers! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. 汇编实现点亮Led灯(2440)

    1.gboot.lds OUTPUT_ARCH(arm)ENTRY(_start)SECTIONS {    . = 0x30008000;        . = ALIGN(4);    .text ...

  6. linux 基础命令与文件管理

      Linux终端介绍 Shell提示符 Bash Shell基本语法 基本命令的使用:ls.pwd.cd 查看系统和BIOS硬件时间 Linux如何获得帮助 Linux关机命令:shutdow.in ...

  7. Oracle下批量将一个用户的所有表的select权限赋值给另外一个用户

    起因 为什么会有这篇文章呢? 因为最近在做项目的时候遇到一个问题...实际生产环境中程序datasource登陆的Oracle数据库用户user1不是我们创建的.这个用户没有访问我们业务表的权限(因为 ...

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

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

  9. Oracle初级函数的使用

    --1.字符函数--UPPER(string|column) 可以将字符转成大写select upper('helloword') from dual;select upper(ename) from ...

  10. iOS中如何监测来电

    http://blog.csdn.net/liujinlongxa/article/details/44207587