关于input上传文件

上传文件使用 <input type="file" value="上传文件" />
同时，需要多选时需添加属性：<input type="file" value="上传文件" multiple="multiple" />
注意：input[type=file]无法设置好看的样式，所以我更多采取[type=button]放在下面[type=file]放在上面不透明度为0的方式
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>内容分发</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/scrollbar.css"/>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        /*body{background-color: #05122e;}*/
        .popup-main{position: relative;width: 564px;height: 339px; font-family: MicrosoftYaHeiUI; background:url(images/distributePopBac.png); margin: 0 auto;}
        .popup-main-title { padding: 0 20px; height: 50px; line-height: 50px; border-bottom: 1px solid #0077df; }
        .popup-main-title .color{ display: inline-block; margin-right: 5px;  vertical-align: top; height: 18px; margin-top: 16px; width: 2px; background: #207cba;}
        .popup-main-title .titTxt{ color: #ffffff; font-size: 16px; }
        .popup-main-title .close{ cursor: pointer; float: right; margin-top: 19px; margin-right: -2px; height: 13px; width: 13px; background: url(images/close.png); }

        .popup-main-con{ font-size: 0; overflow: hidden; padding: 30px 35px 140px;font-size: 14px; color: #ffffff; position: relative;}
        .popup-main-con input[type=text]{ outline: none; margin-right: 10px; box-sizing: border-box; background: transparent; text-indent: 8px;color: #bababa; width: 310px; height: 29px; border: solid 1px #52a1ff;}
        .popup-main-con input[type=text]:read-only{cursor: pointer;}
        .popup-main-con input[type=text]:hover{border-color: rgb(127, 245, 253);; color: #ffffff;}
        .popup-main-con input[type=text]:focus{border-color: rgb(127, 245, 253); color: #ffffff;}
        .popup-main-con label{color: #ffffff; margin-right: 2px;}
        .popup-main-con input[type=button]{cursor: pointer; outline: none; box-sizing: border-box; width: 100px; height: 29px; color: #ffffff; background-color: #0048c7;border-radius: 4px; border: solid 1px #004dd5;}
        .popup-main-con input[type=file]{ position: absolute; right: -117px; top: 32px; opacity: 0; }

        .popup-main-btn{ text-align: center; margin-top: 30px;}
        .popup-main-btn input[type=button]{ cursor: pointer; outline: none; width: 114px; height: 29px; background: transparent; color: #ffffff; border: 1px solid #87d4fb; border-radius: 8px;}
        .popup-main-btn input[type=button]:hover{ background-image: linear-gradient(to top, #00b1fb 0%, #0082bb 50%, #035483 100%);}
        .popup-main-btn input[type=button]:first-child{margin-right: 30px;}
    </style>
</head>
<body>
    <div class="popup-main">
        <div class="popup-main-title">
            <span class="color"></span>
            <span class="titTxt">查看</span>
            <span class="close" onclick="layerClose()"></span>
        </div>
        <div class="popup-main-con">
            <label for="import">导入文件</label>
            <input type="text" name="" class="import" id="import" value="" readonly>
            <input type="button" value="上传文件">
            <input type="file" value="上传文件" multiple="multiple">
        </div>
        <div class="popup-main-btn">
            <input class="closeBtn" type="button" id="" value="取消"  onclick="layerClose()"/>
            <input class="subBtn" type="button" id="" value="确定"/>
        </div>
    </div>
    <script>
        //点击弹窗中的某个元素关闭自身（弹窗）
        function layerClose() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
        $(document).ready(function() {
            $(".popup-main-con input[type=file]").change(function() {
                var text = '';
                console.log($(this).get(0).files.length);
                for(var i=0; i<$(this).get(0).files.length; i++){
                    text += $(this).get(0).files[i].name;
                }
                $(this).parent().find("input.import").val(text);
            });
        });
    </script>
</body>
</html>
View Code
限制上传文件类型：accept=".pdf,.png,.jpg,.gif,.jpeg"