FileUpload控制項修改

FileUpload正常格式是一個文字框加一個按鈕，但是我們有時候會想要自訂按鈕的樣式，那麼我們就需要隱藏一個FileUpload控制項，然後自己加一個按鈕，點擊這個按鈕選擇上傳檔案，這裡有個地方要注意，FileUpload出於安全考慮，如果是其他按鈕觸發的他的onclick事件，選擇的檔案，是無法通過驗證的，submit會失敗。所以，不能用其他按鈕觸發FileUpload控制項的onclick事件。

那麼就要求我們，做的效果是，點擊自己添加的按鈕，但實際是點擊的FileUpload控制項的按鈕。思路是用自訂顯示的覆蓋在FileUpload控制項上，但是發生點擊時，點擊的是FileUpload控制項。

下面的代碼可以實現，至於FileUploadSubmit()這個方法，是選擇檔案後，觸發的js事件，這時候就可以提交伺服器了

            <input type="text" id="txt" name="txt">
            <input type="button" onmousemove="FileUploadImage.style.pixelLeft=event.x-60;FileUploadImage.style.pixelTop=this.offsetTop;"
                value="請選擇檔案" size="30">
            <asp:FileUpload ID="FileUploadImage" runat="server" onchange="txt.value=this.value;FileUploadSubmit()"
                Style="position: absolute; filter: alpha(opacity=0);" size="1" hidefocus />

如果是IE9的話，換成下面代碼

            <input type="text" id="txt" name="txt">
            <input type="button" onmousemove="FileUploadImage.style.pixelLeft=event.x-60;FileUploadImage.style.pixelTop=this.offsetTop+17;"
                value="請選擇檔案" size="30">
            <asp:FileUpload ID="FileUploadImage" runat="server" Width=50 onchange="txt.value=this.value;FileUploadSubmit()"
                Style="position: absolute; filter: alpha(opacity=0);" size="1" hidefocus />

因為ie9的相對位置好像不對，可以把filter: alpha(opacity=0);這個刪掉，就能看到效果了。