自定义上传图片按钮 实现图片的预览和切换

功能：自定义上传按钮的样式，初始样式的透明度为0，设置自己想要的样式，同时可以实现上传图片的预览。

HTML代码：

<form action="" name="formx" method="post" enctype="multipart/form-data
">
<span>选择文件</span>
<input type="file" name="userfile" onchange="handleFiles(this.files,this.nextElementSibling)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<div><p></p></div>
<ul id="list">
</ul>
</form>

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;
display: none;
margin: 15px;
position: relative;
}
div img {
width: 100%;
height: 100%;
}
div p {
width: 200px;
position: absolute;
right: -230px;
bottom: 0;
line-height: 35px;
}
ul {
width: 600px;
height: 350px;
}
ul li {
width: 170px;
height: 100px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
ul li img {
width:100%;
height:100%;
display: inline-block;
margin: 0 auto;
}JavaScript代码：
<script>
//获取div
var oDiv = document.getElementsByTagName('div')[0];
var oP = document.getElementsByTagName('p')[0];

// 创建li的个数
var arrImg = ["img/timg (1).jpg","img/timg (2).jpg","img/timg (3).jpg","img/timg (4).jpg","img/timg.jpg"];

var oList = document.getElementById('list');

// 循环arrImg，渲染li
for(var i=0;i<arrImg.length;i++) {
createListImg(arrImg[i]);
}

// 获取oList中的img
var aImg = oList.getElementsByTagName('img');
for(var i=0;i<aImg.length;i++) {
aImg[i].index = i;
aImg[i].onclick = function() {
oP.style.display = "none";
oDiv.style.display = 'block';
if(oDiv.innerHTML.indexOf('img') > 0) {
var oPic = oDiv.getElementsByTagName('img')[0];
oDiv.removeChild(oPic);
createDivImg(arrImg[this.index]);
}else {
createDivImg(arrImg[this.index]);
}
}
}
console.log(aImg);

// 创建oDiv中的img标签
function createDivImg(ImgSrc) {
var oImg = document.createElement('img');
oImg.src = ImgSrc;
oDiv.appendChild(oImg);
}

// 创建oList中的img标签
function createListImg(ImgSrc) {
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = ImgSrc;
oLi.appendChild(oImg);
oList.appendChild(oLi);
}

// 上传图片发生改变
function handleFiles(file,obj) {
var oImgSize = document.formx.userfile.files[0].size;
//获取当前点击的元素的所有同级元素的html内容
var con = obj.innerHTML;

//判断当前点击元素内是否已经存在img图片元素，如果有则先全部清除后再添加，如果没有就直接添加
if (con.indexOf("img") > 0) {
//获取obj中的img
var pic = obj.getElementsByTagName("img")[0];
//移除该图片
obj.removeChild(pic);
//调用添加img图片的函数
creatImg();
//div显示
oDiv.style.display = "block";
oP.style.display = "block";
ImgSize();
} else {
creatImg();
oDiv.style.display = "block";
oP.style.display = "block";
ImgSize();
}
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);
}

function ImgSize() {
if(oImgSize < 1024*1024) {
oP.style.color = '#000';
oP.innerHTML = Math.floor(oImgSize/1000) +"KB,可以上传";
}else {
oP.style.color = 'red';
oP.innerHTML = "图片大于1M，不可上传";
}
}
}
</script>