上传附件,在很多页面必不可少.越来越多的框架中,都封装了自己的附件上传,但是,总有些例外,
最近的一个项目中,要自己去写上传附件的插件,然后就费了些功夫写了一个.
话不多少,干点正事.
首先,在需要上传附件的位置写一个<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>成品的话,是下面这个样子的.虽然还是太简陋了,谁让我是一个后端呢!!
