为input设置opacity: 0。样式一为点击选择文件,样式二为拖入选择文件。
样式一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
/*去除默认样式*/
* {margin: 0;padding: 0;}
.container
{
width: 160px;
margin: 30px auto;
}
.filePicker
{
position: relative;
width: 160px;
height: 44px;
line-height: 44px;
text-align: center;
color: #ffffff;
background: #00b7ee;
}
.filePicker input[type="file"]
{
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 44px;
opacity: 0;
cursor:pointer;
}
</style>
</head>
<body>
<!--默认时的表单-->
<div class="container">
<input type="file"/>
</div>
<!--美化后的表单-->
<div class="container">
<div class="filePicker">
<label>点击选择文件</label>
<input id="fileInput" type="file" accept="image/*" multiple>
</div>
</div>
</body>
</html>
样式二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
#box
{
width:150px;
height:150px;
text-align: center;
line-height: 150px;
background-color: rgb(230, 230, 230);
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById("box");
var oContent = document.getElementById("content");
//阻止默认行为
oBox.ondragover = function(e){
e.preventDefault();
};
//添加ondrop事件
oBox.ondrop = function(e){
e.preventDefault();
//获取拖进来的文件,注意是依靠e.dataTransfer.FileList方法来获取FileList对象
var file = e.dataTransfer.files[0];
//读取文件文本
var reader = new FileReader();
reader.readAsText(file, "utf-8");
reader.onload = function () {
//把文本内容添加到页面
oContent.innerHTML = this.result;
};
}
}
</script>
</head>
<body>
<div id="box">拖放文件至此</div>
<p id="content"></p>
</body>
</html>