传统的表单控件十分简陋，可以说是很难看，那怎么办？
方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图:
做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？ 那就使用代理的方法，点击上传就等于点击<input type=”file”>(上传文件表单控件) 废话不多说，直接上代码:
html:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>测试插件</title>
<link rel=”stylesheet” type=”text/css” href=”css/upload.css”>
<style>
body{font-family:”微软雅黑”;font-size:14px;}
.wrapper{width:800px;margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<br><br>
<h1 align=”center”>上传图片预览</h1>
<br><br>
<div class=”wrapper”>
<input type=”file”>
</div>
<script src=”js/upload.js”></script>
</body>
</html>
css:
.file{
margin: 0;
padding: 0;
position:relative;
display:inline-block;
margin:0 10px;
vertical-align:top;}
.file img{
margin: 0;
padding: 0;
display:block;
margin-bottom:4%;
border-radius:4px;
border: none;
}
.file button{
margin: 0;
padding: 0;
border:0 none;
width:48%;
line-height:30px;
color:#fff;
border-radius:4px;
cursor:pointer;
outline:0 none;
font-family:inherit;
}
.file button.upload{
background-color:#0f73da;
}
.file button.remove{
background-color:#aaaaaa;
margin-left: 2%;
}
.file input[type=”file”]{
position:absolute;
top:-999em;
visibility:hidden;
}
js:
//init
function initFile(fo){
var divFile = document.createElement(“div”);
divFile.className=”file”;
fo.parentNode.insertBefore(divFile,fo);
divFile.appendChild(fo);
var btnRemove = document.createElement(“button”);
btnRemove.className=”remove”;
btnRemove.innerHTML=”移除”;
divFile.insertBefore(btnRemove,fo);
var btnUpload = document.createElement(“button”);
btnUpload.className=”upload”;
btnUpload.innerHTML=”上传”;
divFile.insertBefore(btnUpload,btnRemove);
var showImgTar = document.createElement(“img”);
showImgTar.setAttribute(‘src’,’images/nophoto.gif’);
showImgTar.setAttribute(‘width’,’150′);
showImgTar.setAttribute(‘height’,’150′);
divFile.insertBefore(showImgTar,btnUpload);
}
var inputFiles = document.querySelectorAll(“input[type=’file’]”);
inputFiles.forEach(function(inf){
initFile(inf);
})
//file onload
var upload = document.querySelectorAll(“.upload”);
var file = document.querySelectorAll(“.file”);
file.forEach(function(f){
var showImg = f.querySelector(“img”);
var defImgSrc = “images/nophoto.gif”;
var inpFile = f.querySelector(“input[type=’file’]”);
//移除
f.querySelector(“.remove”).onclick = function(){
showImg.src=defImgSrc;
inpFile.value=””;
}
//上传
f.querySelector(“.upload”).onclick = function(){
f.querySelector(“input[type=’file’]”).click();
}
inpFile.onchange = function(){
//判断文件类型
//console.dir(this.value);
var fileName = this.files[0].name;
var fileExt = fileName.split(“.”).pop().toLowerCase();
if(fileExt!=’jpg’ && fileExt!= ‘gif’ && fileExt!= ‘png’){
alert(“请上传jpg,gif,png图片”);
this.value=””;
return;
}
//判断文件大小
var fileSize = 1024 * 1024 * 2;
if(this.files[0].size>=fileSize){
alert(“图片大于2M,请重新选择”);
this.value=””;
return;
}
//创建fileReader对象
var reader = new FileReader();
//图片编码完成
reader.onloadend = function(e){
showImg.src = e.target.result;
}
//解析图片 成base 64位的图片 用fileReader的readAsDataURL 去读本地图片对象
reader.readAsDataURL(this.files[0]);
}
})
代码复制了就可以直接运行了。
这里给大家解释下思路:
当你点击了上传按钮时，执行
f.querySelector(“input[type=’file’]”).click();，让表单控件也点击。
然后选择图片(因为这里的样式时上传图片的样子，其实删掉一些代码也可以上传别的东东)，
选择后代码执行了inpFile.onchange = function()这个函数，将图片传进来，判断文件类型，判断文件大小
将图片解析成base 64位的图片，然后就可以将结果放在页面上预览了。
这样表现和行为都有了， 既漂亮又有用。
而init()方法就是初始化input表单，让光头司令<input type=”file”>最终变成了下面的代码:
<div class=”file”>
<img src=”images/nophoto.gif” width=”150″ height=”150″>
<button class=”upload”>上传</button>
<button class=”remove”>移除</button>
<input type=”file”>
</div>
从而来美化上传框
sad
