zoukankan      html  css  js  c++  java
  • html+css上传文件控件美化

    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>  
  • 相关阅读:
    Linux下汇编语言学习笔记71 ---
    Linux下汇编语言学习笔记70 ---
    Linux下汇编语言学习笔记67 ---
    Linux下汇编语言学习笔记66 ---
    Linux下汇编语言学习笔记65 ---
    Linux下汇编语言学习笔记64 ---
    尽量用类型化的常量替代预处理器的 #DEFINE 方法
    尽量用类型化的常量替代预处理器的 #DEFINE 方法
    UILabel How to set background image
    UILabel How to set background image
  • 原文地址:https://www.cnblogs.com/genesis/p/6246925.html
Copyright © 2011-2022 走看看