步骤1.创建一个简单的HTML标记
Upload
第2步：CSS：
有点棘手了
.fileUpload
{
position:
relative
overflow:
hidden
margin:
10px
}
.fileUpload
input.upload
{
position:
absolute
top:
0
right:
0
margin:
0
padding:
0
font-size:
20px
cursor:
pointer
opacity:
0
filter:
alpha(opacity=0)
}
为简单起见，我使用应用了BootstrapCSS样式的按钮
(div.file-upload)。
演示：
上传按钮，显示选中的文件
不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。
JavaScript：
document.getElementById("uploadBtn").onchange
=
function
()
{
document.getElementById("uploadFile").value
=
this.value
}
DOM:
Upload
+分采纳<html>
<head>
<style>
*{
margin: 0
padding: 0
box-sizing: border-box
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
</style>
</head>
<body>
<div></div>
<input type="file" multiple="multiple" onchange="upload(event)">
</body>
</html>
<script type="text/javascript">
const [el,stage] = [
document.querySelector('input'),
document.querySelector('div'),
]
function upload({target}){
if(!target.files.length) return
for(const file of target.files){
const img = new Image()
img.src = URL.createObjectURL(file)
stage.appendChild(img)
}
}
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）