使用inputfile上传文件,上传文件的框简直不要太寒碜,最近做多文件的上传,修改了一下上传方式,在这做下记录。
改变inputfile的样式是不太现实的事情,所以参考了网上,有两种方式去改变:
- 将inputfile设置为不可见状态,然后使用一个a标签或者一个按钮去执行对这个inputfile的点击事件达到选择文件的要求,并且由于是使用的a标签或者按钮,样式可以随意的设定。在需要上传多个的时候也可以使用,思路如下:
通过一个方法去触发文件上传的点击事件,选择文件上传,如果需要上传多个文件只需要对ID进行一下设定就可以。可以很好的解决多文件上传的样式问题。<input type="file" style="display:none" id="atta" οnchange="getName(this.value)"/> <a href="#" οnclick="addFile"> <div id="fileBox"></div> <script type="text/javascript"> function addFile(){ $("#atta").click(); } function getName(name){ var strFileName = name.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1"); //正则表达式获取文件名,不带后缀 var FileExt = name.replace(/.+\./, ""); //正则表达式获取后缀 var n = strFileName + '.' + FileExt; //取得完整的上传文件文件名 $("#fileBox").append("此处添加上传文件的展示,提示用户添加的上传文件是什么,同时提供删除方法"); //提供删除方法的时候要连带inputfile也一起移除 }
- 将inputfile设置为透明,用一个标签覆盖这个inputfile,并将点击事件覆盖到inputfile上。间接触发点击事件进行文件上传,并在选择文件后添加相应提示,添加提示的方式同上即可。该方式和上边的方式都可以对文件上传的样式进行调整,不过这个方式的样式比较多的限制,因为需要让点击事件覆盖到inputfile上才可以。但该方法主要用于解决IE8、IE9的文件上传问题,如果使用上边的方法进行文件上传,在IE8、IE9上会提示表单无法提交。原因是因为IE8、IE9使用js方法对inputfile进行click事件会导致表单无法提交,具体是为什么,我也不了解...只是IE8、IE9不支持这么做,这就是个烦人的事情。下面介绍下思路:
a的样式<div id="allFile" style="float:left"> <div id="fileBox" class="fileBox"> <a class="inputA" href="#"><input class="inputFile" type="file" name="mailAtta" οnchange="showName(this.value)"/>添加附件</a> </div> </div> <div id="fileBox"></div> <script type="text/javascript"> function showName(name){ var strFileName = name.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1"); //正则表达式获取文件名,不带后缀 var FileExt = name.replace(/.+\./, ""); //正则表达式获取后缀 var n = strFileName + '.' + FileExt; var i = 0; //用于多文件上传,选中文件后隐藏当前的inputfile,新建一个相同的inputfile显示在相同的位置 //在另一个div中展示上传文件的信息,和第一种方式一样,i用于在删除时做区分,不然难以删除 if(i == 0){ $(".fileBox").css("display","none"); i++; $("#allFile").prepend("此处加入fileBox的div即可,ID用全局变量I做区分即可做多文件的上传"); $('#attaBox').append("上传文件的展示信息,最好带删除"); }else{ $(".fileBox").css("display","none"); $('#attaBox').append("上传文件的展示信息,最好带删除"); i++; $("#allFile").prepend("同上"); } }
这两种方式都可以实现对文件上传的样式进行调整,并且支持多文件的上传。当然使用异步上传的方式会更好些,这里只提供一个解决方式,按实际需要做。.inputA{ display:inline-block; width:57px; height:20px; position:relative; overflow:hidden; font-size:14px; }
老实说,使用异步上传的方式更符合当前的行情,但如果没有必要使用这种方式进行文件的上传会更加的简易。而且IE确实是个难以跨越的大关。