多文件上传样式改变

使用inputfile上传文件，上传文件的框简直不要太寒碜，最近做多文件的上传，修改了一下上传方式，在这做下记录。

改变inputfile的样式是不太现实的事情，所以参考了网上，有两种方式去改变：

将inputfile设置为不可见状态，然后使用一个a标签或者一个按钮去执行对这个inputfile的点击事件达到选择文件的要求，并且由于是使用的a标签或者按钮，样式可以随意的设定。在需要上传多个的时候也可以使用，思路如下：

<input type="file" style="display:none" id="atta" onchange="getName(this.value)"/>
  <a href="#" onclick="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也一起移除
}

通过一个方法去触发文件上传的点击事件，选择文件上传，如果需要上传多个文件只需要对ID进行一下设定就可以。可以很好的解决多文件上传的样式问题。

将inputfile设置为透明，用一个标签覆盖这个inputfile，并将点击事件覆盖到inputfile上。间接触发点击事件进行文件上传，并在选择文件后添加相应提示，添加提示的方式同上即可。该方式和上边的方式都可以对文件上传的样式进行调整，不过这个方式的样式比较多的限制，因为需要让点击事件覆盖到inputfile上才可以。但该方法主要用于解决IE8、IE9的文件上传问题，如果使用上边的方法进行文件上传，在IE8、IE9上会提示表单无法提交。原因是因为IE8、IE9使用js方法对inputfile进行click事件会导致表单无法提交，具体是为什么，我也不了解...只是IE8、IE9不支持这么做，这就是个烦人的事情。下面介绍下思路：

<div id="allFile" style="float:left"><div id="fileBox" class="fileBox"><a class="inputA" href="#"><input class="inputFile" type="file" name="mailAtta" onchange="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("同上");}}

a的样式

.inputA{display:inline-block;width:57px;height:20px;position:relative;overflow:hidden;font-size:14px;}

这两种方式都可以实现对文件上传的样式进行调整，并且支持多文件的上传。当然使用异步上传的方式会更好些，这里只提供一个解决方式，按实际需要做。

老实说，使用异步上传的方式更符合当前的行情，但如果没有必要使用这种方式进行文件的上传会更加的简易。而且IE确实是个难以跨越的大关。

秒客网

多文件上传样式改变

相关文章