这篇文章介绍的内容是HTML实现美化上传文件i样式 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

传统写法

上传文件

效果如下图所示

这个样式调整了很长时间，最后结果都不尽人意。

非常规写法

上传文件

上传

给真正的用于上传文件的Input style='display:none;'隐藏起来，然后用一个很容易控制样式的button或者p盒子等代替。当点击button的时候，同时用js触发点击那个用于上传文件的input即可。$("#uptea").click(function () {

$("#upteainput").click();

});//下面是ajax上传文件的代码，此处就不做过多讲解。 $("#upteainput").change(function () {//如果上传文件的input内容发生了变化

$val = $("#upteainput").val(); if ($val != '') {//要上传的文件名不为空

$data = new FormData($("#upform")[0]);//创建一个formdata对象

$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) {//如果调用php成功

if (data.errno != 0) { if (data.errmsg != '') {

alert(data.errmsg);

} else {

alert("系统错误");

}

}

console.log(data);

alert("导入成功");

window.location.reload();

}

});

}

});

实际效果如下所示

相关推荐：