1.jQuery：https://cdn.bootcss.com/jquery/3.4.1/jquery.js

html代码

  <input type="file" id="myfile" hidden multiple/>
  <div id="upBtn" class="vertTop">
       <button class="upBtn">浏览</button>
       <div class="upBtnContent"></div>
  </div>
  <br/>
  <button class="myBtn" id="mySubmit">提交</button>

js代码

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $('#upBtn').click(function () {  
            $('#myfile').click();
        })

        $('#myfile').change(function () {  
            var fileList=this.files;
            var html='';
            for(var i=0;i<fileList.length;i++){
                 console.log(fileList[i].name);
                 html+=fileList[i].name+";";
            }
            $('#upBtn .upBtnContent').html(html);
        })

        $('#mySubmit').click(function(){
            var formData = new FormData();
            console.log($('#myfile')[0]);
            formData.append("myfileList",$('#myfile')[0].files);
            var myUrl = "";
            $.ajax({
                    url:myUrl,
                    dataType:'json',
                    type:'POST',
                    async: false,
                    data: formData,
                    processData : false, // 数据不做处理
                    contentType : false, // 不要Content-Type请求头
                    success: function(data){
                        console.log(data);
                        if (data.status == true) {
                            alert('上传成功！');
                        }
                    },
                    error:function(response){
                           alert('上传出错！');
                    }
                });
        })
    </script>

css代码

<style>
        * {
            /* moz-user-select: -moz-none; */
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .myBtn{
            background-color:#299af7;
            border:0;
            border-radius:5px;
            height: 30px;
            width: 60px;
            color: #ffffff;
        }
        .myBtn:hover{
            background-color: #2966e9;
            cursor: pointer;
        }
        .myBtn,.upBtn:focus{
            outline: none;
        }
        .upBtn{
            border:0;
            display: inline-block;
            vertical-align:top;
            background-color: #0daaf3;
            height: 30px;
            width: 50px;
        }
        .upBtn:hover{
            background-color: #0d8ac4;
            cursor: pointer;
        }
        .upBtnContent{
            height: 30px;
            width: 100px;
            background-color: #c1c1c1;
            display: inline-block;
            vertical-align:top;
            line-height: 30px;
            font-size:12px; 
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;
        }
    </style>

效果图

image.png