自定义type为file型input控件+该控件具有本地图片预览功能

最近的一个项目需求是写一个type为filex型的input控件，这个控件：

• 第一，要自定义样式；
• 第二，要能直接在本地预览上传的图片；
• 第三，要能检测图片的尺寸是否符合要求。

故综合网上的资源写了下面的代码。思路说明持续补充中。。。

html

<div class="item" id="select-storeKeeper">
    <span class="label"><b class="ftx04">*</b>身份证正面：</span>
    <div class="uploadwrap">
        <input type="file" id="idcard" name="idcard">
        <input name="path" id="path" autocomplete="off" onpaste="return false;">
        <input name="uploadbtn1" id="uploadbtn1" type="button" value="浏览文件" tabindex="4">
        <span class="reminder">
            <span class="myword">请上传身份证正面照片:</span>
            <span class="mysize"> 宽224~264px，高132~186px</span>
        </span>
    </div>       
</div>
<div id="idcardPreview"  class="beforePre" >
    <img src="" alt="idcard">
</div>
<div class="preWord" id="preWord1">（上传图片预览）</div>

js:

/********************图片预览********************/
function idcardPreview(args) {//idcard实际上传控件处理程序（即类型为type的input）
   var inputObj=document.getElementById("idcard");
   var imgPreview=document.getElementById("idcardPreview");
   var imgSelf=document.querySelector("#idcardPreview img");
   var uploadbtn=document.getElementById("uploadbtn1");
   var path=document.forms["form0"].elements["path"];
   var reminder=document.querySelector("#select-storeKeeper .reminder");
   var preword=document.getElementById("preWord1");
  
   imgSelf.onload=function(event){
      if (imgSelf.style.width) {//如事先已有图片样式，则图片宽高样式得先去掉
         imgSelf.style.width=null;
      }
      if (imgSelf.style.height) {
         imgSelf.style.height=null;
      }
      var lw=243,lh=153;
      var scale=1.6;
   
      var rw=imgSelf.offsetWidth;
      var rh=imgSelf.offsetHeight;
      console.log("rw:"+rw+" "+"rh:"+rh);
      var fw,fh;
      
      if (rw/rh>2||rw/rh<1.2) {
         removeClass(imgPreview,"preview");
         preword.style.display="none";
         path.style.display="none";//IE8-不认识setProperty
         reminder.style.display="inline";
         uploadbtn.style.left=null;
         inputObj.value="";
         alert("您的图片尺寸不合适，请更换图片
请保证图片宽224~264px，高132~186px。");
      }
      else{
         if (rw/rh>scale) {
            fw=lw;
            fh=rh/(rw/lw);
         
         }
         else if (rw/rh<scale) {
            fh=lh;
            fw=rw/(rh/lh);
         }
         else{
            fh=lh;
            fw=lw;
         }
         console.log("fw:"+fw+" "+"fh:"+fh);
         imgSelf.style.width=fw+"px";
         imgSelf.style.height=fh+"px";
         
         preword.style.display="block";
         path.value=inputObj.value;//显示文件路径    
         path.style.display="inline";//IE8-不认识setProperty
         reminder.style.display="none";
         uploadbtn.style.left="190px";
      } 
   }
   
   if (inputObj.files && inputObj.files[0]) {//IE11,IE10,Chrome,FF
      addClass(imgPreview,"preview");
      imgSelf.src=window.URL.createObjectURL(inputObj.files[0])
                    ||inputObj.files[0].getAsDataURL();//火狐7以下
   }
   else{//IE10以下
      inputObj.value="";
      alert("您的浏览器版本过低，图片上传失败。
请更换浏览器(ie10+或其他高级浏览器)，谢谢！")
   }
}




function addClass(elem,newclass) {//跨浏览器的样式添加函数
   if (elem.classList) {
       elem.classList.add(newclass);
   }
   else{
       var classArr=elem.className.split(/s+/);
       classArr.push(newclass);
       elem.className=classArr.join(" ");
   }
}
function removeClass(elem,oldclass) {//跨浏览器的样式移除函数
   if (elem.classList) {
      elem.classList.remove(oldclass);
   }
   else{
      var classArr=elem.className.split(/s+/);
      for (var i=0,len=classArr.length;i<len;i++) {
         if (classArr[i]==oldclass) {
            classArr.split(i,1);
            break;
         } 
      }
      elem.className=classArr.join(" ");
   }
}

function idcardClick() {//idcard形式上传按钮事件处理程序
   document.forms["form0"].elements["idcard"].click();
}


window.onload=function(){
   document.getElementById("uploadbtn1").onclick=idcardClick;

   
   document.getElementById("idcard").onchange=idcardPreview;
}