JS 上傳附件input美化 一鍵解決

  上傳附件,在很多頁面必不可少.越來越多的架構中,都封裝了自己的附件上傳,但是,總有些例外,

最近的一個項目中,要自己去寫上傳附件的插件,然後就費了些功夫寫了一個.

話不多少,幹點正事.

首先,在需要上傳附件的位置寫一個<input class="file_inp" />,class必須為"file_inp"      現在,它隻是一個輸入框.

(ps:你也可以自己定義,但是要把下面的css以及js内的一并替換)

<input class="file_inp" />
           

将下面這些js代碼,直接複制,放入你的公共js中,或者放在目前頁面.

//替換class=file_inp的元素為上傳附件的div
function inpChangeFile() {
	var inpcount=document.getElementsByClassName('file_inp').length;
	if(inpcount>0){
		for(var i=0;i<inpcount;i++){
			var oldinp=document.getElementsByClassName('file_inp')[0];
			var newform=creatdivs(i);
			oldinp.parentNode.replaceChild(newform,oldinp);
		}	
	}else{
		return false;
	}
}
//建立包含上傳附件插件的div
function creatdivs(n){
	var div= document.createElement("div");
	div.setAttribute("id","fordiv"+n);
	var a = document.createElement("a");
	a.setAttribute("class","show_a");
	a.setAttribute("href","javaScript:void(0)");
	var inp0=creatinps("file","hidinp",n);
	var inp1=creatinps("button","btninp",n);
	var span=document.createElement("span");
	span.setAttribute("id","showinp"+n);
	span.setAttribute("class","showinp");
	a.innerText="選擇檔案";
	a.appendChild(inp0);
	div.appendChild(a);
	div.appendChild(inp1);
	div.appendChild(span);
	return div;
}
function creatinps(type,objid,k){
	var inp=document.createElement("input");
	if(type=="file"){
		inp.setAttribute("multiple","multiple");
		inp.setAttribute("class","hid_inp");
		inp.setAttribute("onchange","inpChangeText('"+k+"')");
		inp.setAttribute("id",objid+k);
	}else if(type=="button"){
		inp.value="删除";
		inp.setAttribute("class","inp_btn");
		inp.setAttribute("onclick","inpCleanText('"+k+"')");
	}
	inp.setAttribute("type",type);
	return inp;
}
//将檔案名顯示到後面的span标簽内
function inpChangeText(k) {
	var file1=document.getElementById('hidinp'+k).files[0];
	var file2=document.getElementById('showinp'+k);
	file2.innerText=file1.name;
}
//删除檔案
function inpCleanText(n){
var file=document.getElementById("hidinp"+n).files[0];
if(file){
	var r=confirm("您是否要删除掉該檔案(對您本地檔案無影響)?");
	if (r==true){
		var inpobj=creatinps('file','hidinp',n);
		var aobj=document.getElementsByClassName("show_a")[n];
		aobj.removeChild(document.getElementById("hidinp"+n));
		aobj.appendChild(inpobj);
		document.getElementById("showinp"+n).innerText="";
	}else{
		return false;
	}
}
}
           

什麼,你說沒反應?别急,下面是引入js方法

<script type="text/javascript">
    inpChangeFile() ;
</script>
           

哎呀媽呀,太醜了! 哦,我忘了給你css了

<style type="text/css">
.show_a {
	height: 25px;
	display: inline-block;
	position: relative;
	padding: 0px 15px;
	text-decoration: none;
    color: #087ab2;
    outline: none;
	text-decoration: azure;
	background-color: #fafafa;
	border-radius: 7px;
	border: 1px solid gainsboro;
}
.hid_inp {
	position: absolute;
	overflow: hidden;
	right: 0;
	top: 0;
	opacity: 0;
	width: 100%;
	height:100%;
}
.inp_btn{
	height: 27px;
	padding:0px 20px;
	text-decoration: azure;
	background-color: #fafafa;
	border-radius: 7px;
	border: 1px solid gainsboro;
	color:#087ab2;
}
.showinp {padding-left: 10px;}
body {
  font-family: "Segoe UI","PMingLiu","PingFang SC","WenQuanYi Micro Hei",Sans-serif;
    font-size: 13px;
   color: #454545;
   line-height: 1.8;
    -webkit-text-size-adjust: none;
}
</style>
           

成品的話,是下面這個樣子的.雖然還是太簡陋了,誰讓我是一個後端呢!!