input file 样式美化
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<a href="javascript:;" class="fileStyle">File Upload
<input type="file" id="ajaxUpload" style="width:50%">
</a>
<style>
.fileStyle {
position: relative;
display: inline-block;
background: #28bdb7;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: white;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.fileStyle input {
position: absolute;
font-size: 100px;
right: 0;top: 0;
opacity: 0;
}
.fileStyle:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
.commAlertMask {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
position: fixed;
top: 0;
right: 0;
z-index: 100;
}
.commAlertMask .commMaskBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background: #fff;
min-width: 400px;
max-width: 90%;
max-height: 90%;
overflow: auto;
-webkit-box-shadow: 0 0 25px #666;
box-shadow: 0 0 25px #666;
padding: 30px;
}
.commAlertMask .commMaskBox .commMaskClose{
position: absolute;
top: 5px;
right: 10px;
height: 24px;
width: 24px;
cursor: pointer;
opacity: .5;
-webkit-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
transition: opacity .3s linear;
}
.commMaskBox .commMaskClose i{
font-size: 24px;
font-weight: bold;
}
.commMaskBox .commMaskClose:hover{
opacity: 1;
}
</style>
<script>
function LoadingStart(LoadText){
var loadingHidder = null;
loadingHidder = "<div class='commLoading' style='background: rgba(0,0,0,0.1); width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;'><div style='background: #fff;position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);padding: 30px 50px 20px;border-radius: 5px;line-height: 20px;box-sizing: border-box;text-align: center;'><img src='https://www.buruyouni.com/static/upload/images/loading.gif' style='width: 35px;display: block;margin: 0 auto 15px;' /><span>" + LoadText + "<span></div></div>";
$("body").css("overflow","hidden").append(loadingHidder);
}
function LoadingEnd(){
$("body").css("overflow","");
$(".commLoading").remove();
}
function commAlert(ALERTINNERHTML){
var alertHTML = "";
alertHTML += "<div class='commAlertMask'><div class='commMaskBox'><div class='commMaskClose'><i style='font-size:22px;font-style:normal'>x</i></div><div className='commAlertCont'>" + ALERTINNERHTML + "</div></div></div>";
$("body").append(alertHTML);
$(".commAlertMask .commMaskClose").click(function(){
$(".commAlertMask").remove();
});
}
$('#ajaxUpload').change(function(){
LoadingStart("uploading...");
var data = new FormData();
data.append('myfile',$(this).get(0).files[0]);
setTimeout(function(){
LoadingEnd();
commAlert("上传成功...");
},2000);
});
</script>
</html>
