<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>")
}
}