上传文件——file标签深藏功与名

浏览数：18 / 时间：2015年06月09日

　　在Html标签中，<input type="file"/>是被用来上传文件的，但是这哥们儿在不同的浏览器下各有一副嘴脸，怎一个“别扭”了得。一直想解决这个头疼的问题，最近在读了一篇博文之后，忽然有了思路。

　　在上传文件时，<input type="file"/>是被放在一个form中，form既然要上传文件，一定是以post方式传输数据，enctype也要设置成multipart/form-data。如下：

<form id="uploadForm"  action="test.ashx" method="post" enctype="multipart/form-data">
 <input type="file" name="uploadFile" id="uploadFile" style="visibility:hidden;position:absolute;top:0px;width:0px"/>
</form>
<input type="button" value="上传" id="btn"/>

　　既然file标签长得不好看，就不让它显示，本来想设置display属性，但是在苹果浏览器下没能实现上传，只好设置visibility为hidden，但这么一来，file标签就独占了空白的一块区域，所以又继续设置了后面三个属性。这样页面上就只有一个button按钮，此时只需要设置按钮点击时触发file标签的点击事件，而当选择完上传的文件之后，将触发file标签的onchange事件，只需要在此事件中提交form表单的数据即可。如下：

<script src="jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //按钮的点击事件
            $(‘#btn‘).click(function () {
                //触发file的点击事件
                $(‘#uploadFile‘).click();
            });
            //file的change事件
            $(‘#uploadFile‘).change(function () {
                //提交form表单的数据
                $(‘#uploadForm‘).submit();
            });
        });
    </script>

　　当然，在提交数据时还可以使用AjaxForm实现异步提交，至于后台的操作，这里就不再赘述。

　　file标签虽然被隐藏，但依然完成了它的工作，也算深藏功与名，而页面上那个孤零零的button就成了一个任人打扮的小姑娘。本人实在不擅于搞CSS这些东东，窃以为应该还有更好的方式实现这个效果，希望众位高手们可以不吝赐教。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

上传文件——file标签深藏功与名