上傳文件——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這些東東，竊覺得應該還有更好的方式實現這個效果，但願衆位高手們能夠不吝賜教。