最近的一个项目需求是写一个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("您的图片尺寸不合适，请更换图片\n请保证图片宽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("您的浏览器版本过低，图片上传失败。\n请更换浏览器(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;

}