获取input type=file的文件名方法：
let filePath = $("input[type = 'file']").val(); //获取路径
let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组
let fileName = urlArr[urlArr.length-1]; //获取文件名
input type=file在个浏览器中样式各不相同，如下图所示：
若要统一样式，可将原有样式设置属性 opacity: 0,布局上用定位position：relative/absolute实现，实现效果如下：
具体实现代码如下：
<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script src="./d3/jquery-1.12.0.min.js"></script> <style> .fileIpt { width: 423px; height: 30px; } input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .label-text[for = "inputDataBackup1"] { color: #0e0e0e; padding: 5px 20px 6px 20px; margin-bottom: 0px; font-weight: 500; background: #2fc8f6; border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; -moz-border-radius: 3px 0px 0px 3px; font-size: 14px; vertical-align: middle; text-align: center; } #inputDataBackup1 { width: 268px; height: 30px; background: transparent; position: relative; display: inline-block; margin-left: -6px; padding: 1px 0px 0px 0px; color: #57D1F7; text-align: center; vertical-align: middle; border: 2px solid #2fc8f6; border-radius: 3px; -webkit-border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .selectFile { position: absolute; left: 0; top: -1px; z-index: 3; height: 30px; width: 268px; opacity: 0; } .errTip { position: absolute; top: 20px; left: 50%; margin-left: -90px; color: red; font-size: 12px; } .fileName { width: 210px; height: 30px; position: absolute; left: 0; top: -2px; z-index: 1; color: #000; text-align: center; background-color: transparent; border-color: transparent; overflow: hidden; text-overflow: ellipsis; } .path { width: 55px; height: 30px; background-color: #2fc8f6; display: inline-block; position: absolute; top: -2px; right: 0; z-index: -1; text-align: center; vertical-align: middle; border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; -moz-border-radius: 0px 3px 3px 0px; } .pathText { display: inline-block; font-size: 12px; line-height: 30px; color: #fff; letter-spacing: 3px; } </style></head><body> <div class="fileIpt"> <label class="label-text" for="inputDataBackup1">选择文件</label> <div id="inputDataBackup1" class="input-selectStyle"> <input class="selectFile" type="file" multiple="multiple" title="未选择任何文件"> <p class="errTip"></p><input class="fileName" readonly="readonly"> <div class="path"> <span class="pathText">上传</span> </div> </div> </div> <script type="text/javascript"> $(".selectFile").on("change",function(){ console.log($(this)) var filesNum = $('.selectFile')[0].files.length; if(filesNum > 1){ var fileTiltle = []; for(var i = 0 ;i<filesNum;i++){ var file=$('.selectFile')[0].files[i]; console.log(file.name); fileTiltle.push(file.name) } $(".fileName").val(fileTiltle.join(",")); $(this).attr("title",filesNum+'个文件'); }else if(filesNum == 1){ var filePath = $(this).val(); var urlArr = filePath.split("\\"); var fileName = urlArr[urlArr.length-1]; $(".fileName").val(fileName); $(this).attr("title",fileName); } if(fileName == "") { $(".errTip").html("请选择上传文件"); }else{ $(".errTip").html(""); } }) </script></body> </html>
上一篇：获取div的宽度和高度