input type="file"的那些事儿

1、默认file标签很难看,而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>file标签隐藏</title>
    </head>
    <body>
        <form method="post" enctype="multipart/form-data" style="display:none;">
            <input onchange="document.forms[0].submit();" type="file" name="file"  />
        </form>
        <a onclick="document.forms[0].file.click();"href="javascript:void(0);" >上传文件</a>
    </body>
</html>

2、IE不能上传文件。其实这是IE安全限制问题,没有点击file的浏览按钮选择文件都不让上传,既然IE非得要亲自点击,我们可以变通一下,让自定义按钮存在又能真正点击到file标签。解决方案是让file标签盖在a标签上,但file是透明的,这样用户看到的是a标签的外观,实际点击是file标签。

   <a style="position:relative;display:block;width:100px;height:30px;background:#EEE;border:1px solid #999;text-align:center;"  href="javascript:void(0);" >上传文件
            <form method="post" enctype="multipart/form-data">
                <input style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;opacity:0;" onchange="document.forms[0].submit();" type="file" name="file"  />
            </form>
        </a>

需要注意几个问题:
a、取消a标签onclick事件,因为实际上已经不需要a标签的onclick触发file的click了,而是直接就点击到file;
b、file标签不需要再设置display:none隐藏,而是通过opacity:0让它完全透明,实际它是浮在a标签之上
c、file标签设置position:absolute后要给left:0、top:0,否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签(在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题。)

3、获取文件名和判断文件类型

var filename=this.value;
//获取文件名
var filenameArray=filename.split("\\");     
var fileSimpleName=filename.split("\\")[filenameArray.length-1];
//判断文件格式
var filextension=fileSimpleName.substring(fileSimpleName.indexOf('.')+1);
 filextension=filextension.toLowerCase();
 if ((filextension!='jpg')&&(filextension!='png')&&    
     (filextension!='pdf')&&(filextension!='txt')&&
    (filextension!='doc')&&(filextension!='docx')&&
    (filextension!='wps')&&(filextension!='xls')&&
    (filextension!='xlsx')){ 
       alert("对不起,文件格式不正确请重新上传 !");
       return false;
 }

4、multipart/form-data


image.png

image.png

5、ie8兼容性问题jquery(ajaxSubmit)
解决方法为:
在controller中@requestMapping中加一个produces=”text/plain”参数就可以了

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容