上传文件使用 <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>
限制上传文件类型：accept=".pdf,.png,.jpg,.gif,.jpeg"
<input class="btnFile" type="file" name="" id="" value="" accept=".pdf,.png,.jpg,.gif,.jpeg" multiple="multiple" />