自定义文件上传

    <style>
        .ui-upload {
            height: 30px;
            width: 80px;
            background-color: #00abff;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            color: #fff;
            border-radius: 3px;
            margin-left: 20px;
        }
    </style>

     <label for="coverPhoto-file" class="ui-upload">选择文件</label>
            <span id="fileName"></span>
            <input type="file" onChange="c(this)" id="coverPhoto-file" style="display: none;"/>

            <a class="btn btn-info" οnclick="submit()">
                <i class="fa fa-upload"></i> 上传
            </a>

  
    function submit() {
        var formData = new FormData();
        var file = document.getElementById("coverPhoto-file").files[0];
        if (file) {
            formData.append("excelFile", file);
            $.ajax({
                url: "/admin/health/user/membershipInformation",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.flag) {
                        $.modal.msgSuccess(result.message);
                    } else {
                        $.modal.msgError(result.message);
                    }
                }
            })
        } else {
            $.modal.msgWarning("请选择上传文件");
        }
    }


    function c(th) {
        var inf = document.getElementById('coverPhoto-file');
        var fN = '';
        //判断并获取文件名
        if (fN = th.value.match(/[^\\\/]+\.[a-zA-Z0-9]+$/)) {
            //如果获取到文件名，则将文件名在后面的span标签中显示出来。
            //这里你可以自行修改要显示的样式等。
            $("#fileName").html("<font color='green'>" + fN + "</font>")
        } else {
            $("#fileName").html("<font color='green'>获取文件名失败</font>")
        }

    }