当前第2页 返回上一页
这个样式调整了很长时间,最后结果都不尽人意。
非常规写法
1 2 3 4 5 | <form id= "upform" enctype= 'multipart/form-data' style= "display:none;" >
<p class = "form-group" >
<label for = "upteainput" >上传文件</label>
<input id= "upteainput" name= "upfile" type= "file" class = "form-control-file" >
</p></form><button id= "uptea" type= "button" class = "btn btn-primary" >上传</button>
|
给真正的用于上传文件的Input style='display:none;'
隐藏起来,然后用一个很容易控制样式的button或者p盒子等代替。当点击button的时候,同时用js触发点击那个用于上传文件的input即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $( "#uptea" ).click( function () {
$( "#upteainput" ).click();
});
$val = $( "#upteainput" ).val(); if ( $val != '' ) {
$data = new FormData($( "#upform" )[0]);
$host = window.location.host;
$.ajax({
url: "http://" + $host + "/home/front/up-tea" ,
type: "POST" ,
data: $data ,
processData: false,
contentType: false,
dataType: "json" ,
error: function () {
alert( 'Error loading XML document' );
},
success: function (data, status) {
if (data.errno != 0) { if (data.errmsg != '' ) {
alert(data.errmsg);
} else {
alert( "系统错误" );
}
}
console.log(data);
alert( "导入成功" );
window.location.reload();
}
});
}
});
|
实际效果如下所示
相关推荐:
文件上传框样式美化
图片上传样式美化
美化上传文件框(上传图片框)
以上就是HTML实现美化上传文件样式 的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
Html是什么?Html网页的简单设计方法介绍
语义化的Html结构有哪些对于对网站的优化
Html中hr是什么意思
Html怎么实现上角标效果
Html的语法详解
Html如何给div加边框
Html取消滚动条的方法
如何在Html中插入空格
术语Html指的是什么
Html自适应字号
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML实现美化上传文件样式