隐藏input控件透明度opacity=0的办法,
图片的预览实现原理使用了javascript里的createObjectURL方法。
css部分:
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
position: relative;
}
span {
display: inline-block;
width : 90px;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
input[type="file"] {
width: 100px;
height: 40px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
div {
width: 200px;
height: 100px;
overflow: hidden;
}
div img {
width: 100%;
height: 100%;
}
</style>
HTML部分
<span>选择文件</span>
<input type="file" οnchange="handleFiles(this.files,this.nextElementSibling)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<div></div>
JavaScript部分
<script>
function handleFiles(file,obj) {
//获取当前点击的元素的所有同级元素的html内容
var con = obj.innerHTML;
//判断当前点击元素内是否已经存在img图片元素,如果有则先全部清除后再添加,如果没有就直接添加
if (con.indexOf("img") > 0) {
//获取obj中的img
var pic = obj.getElementsByTagName("img")[0];
//移除该图片
obj.removeChild(pic);
//调用添加img图片的函数
creatImg();
} else {
creatImg();
}
function creatImg() {
//创建一个img元素
var img = document.createElement("img");
//设置img元素的源文件路径,window.URL.createObjectURL() 方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里
img.src = window.URL.createObjectURL(file[0]);
//window.URL.revokeObjectURL() 释放一个通过URL.createObjectURL()创建的对象URL,在图片被显示出来后,我们就不再需要再次使用这个URL了,因此必须要在加载后释放它
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
//在当前点击的input元素的div中添加刚刚创建的img图片元素
obj.appendChild(img);
}
}
</script>