上傳文件——file標簽深藏功與名

　　在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();
　　　　　　　　　//清空file標簽的value，否則再次提交此文件時，onchange事件就不觸發了
　　　　　　　　　$('#uploadFile').val(''); 
　　　　　　　　}); 
　　　　}); 
</script>

 

　　當然，在提交數據時還可以使用AjaxForm實現異步提交，至於后台的操作，這里就不再贅述。

　　file標簽雖然被隱藏，但依然完成了它的工作，也算深藏功與名，而頁面上那個孤零零的button就成了一個任人打扮的小姑娘。本人實在不擅於搞CSS這些東東，竊以為應該還有更好的方式實現這個效果，希望眾位高手們可以不吝賜教。