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

时间:2022-05-14 19:24:48

最近的一个项目需求是写一个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;
}