首页 > 代码库 > html+css上传文件控件美化

html+css上传文件控件美化

2024-08-30 14:28:46   220人阅读

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 = http://www.mamicode.com/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 = http://www.mamicode.com/this.value;
            }
        });
    </script>
</body>
</html>

 

html+css上传文件控件美化


联系
我们